Author Archives: admin

La mano trémula

– Hay un momento en el que se confabulan las ciscunstancias adversas , se acumulan las preocupaciones y las exigencias no dejan de aumentar. Nuestro sistema nervioso se fuerza mas alla de nuestras posibilidades (quizas las hemos sobreestimado).

– En este contexto se nos presenta una situacion social en el que nuestra mano ha de estar expuesta a la vista , como al hacer un pago o al tocar la guitarra.
LA MANO TIEMBLA!!

– Una mano rebelde, que no cesa de temblar a pesar de nuestros esfuerzos.

– Las conductas evitativas como retrasar el momento , disimulos , etc. Solo hacen admitir y persuadir de la incapacidad de controlarlo. Se convence de que nada puede hacer (salvo beber copas o tomar farmacos) —> FALACIA DE IMPOTENCIA.

– Lo que se puede hacer :
1. No hacerse peliculas de terror antes de tiempo.
2. No hacer maniobras evitativas . Mas que huir . Buscar alternativas o conductas nuevas (bromear , hacer comentarios ,etc)
3. Diagnosticar ‘TENGO MIEDO’ en vez de tiembla mi mano.
4. Hacer el acto suave , sin presion y a un ritmo agradable , recrearse , entretenerse con la accion.
5. Da buenos resultados interrelacionarse mientras hacemos los movimientos. …Me gusta mucho como ha quedado … Espero este satisfecho … Eso que me dices me recuerda …
Ademas de hablar conviene mirar a los ojos a los presuntos censuradores para ver si simpatia tranquilizadora.
6. Respiracion profunda y consigna de aflojar los musculos . Ayuda a coger un camino llano en vez de accidentado.
7. Hacer algo normal con suavidad como atarse los zapatos , abrir carpeta para tomar apuntes , coger una servilleta , dar un toquecito en el hombro a un conocido , que todo se haga a camara lenta.
8. Sostener la mirada y prestar atencion directa a los otros como si estuviera interesado enormemente. Procurar centrar la atencion en los asuntos tratados respondiendo a preguntas guion como : ‘que me parece lo que dice’ , ‘que es lo mas discutible’ …
9. Perseverar. No jugarselo todo a una carta. Si de 10 , salen 5 es una buena noticia.
10. No recurrir a la bebida como solucion.
11. Mejorar nuestra asertividad , espontaneidad y autopromocion para lograr un enfoque distinto a nuestras acciones.
12. Expresarnos de una forma mas atrevida (en vez de apocada y acomplejada) ante las personas que mas nos impresionan.
13. Buscar asesoramiento profesional.

Mandamientos eternos

  • Prefiero molestar con la verdad que complacer con adulaciones.
  • Cuanto más planifique el hombre su proceder más fácil le será a la casualidad encontrarle.
  • Culto es aquel que sabe donde encontrar lo que no sabe.
  • No hay secreto para el exito.Éste se alcanza preparandose, trabajando arduamente y aprendiendo del fracaso.
  • Cuando algo importante esta sucediendo guardar silencio es mentir.
  • La soledad es un buen refugio, pero no para quedarse en él.
  • Conservarás tu juventud mientras sigas aprendiendo, adquiriendo nuevos hábitos y aceptando que te contradigan.
  • No hagas que el oficio altere tu alma.
  • Educad a los niños y no será necesario castigar a los hombres.
  • He aqui la prueba para verificar si tu misión en la tierra ha concluido: si estás vivo no ha concluido aún.
  • El pasado debe ser un trampolín, no una hamaca.
  • Estudia como si fueras a vivir para siempre, vive como si fueras a morir pronto.
  • A tu amada: -“Eres la única mujer que me gustaría ser”-.
  • Los ojos de ver son los del corazón. Cuando cierras los ojos puedes ver lo que quieras.
  • Una vez me crucé con un viejo recluso que me señaló a los tipos que jugaban a la pelota, y me dijo: “¿Ves a esos tios? Cuando salgan harán el imbecil, y volverán pronto, ¿quierés que todo esto te sirva de algo? Ve a la biblioteca, lee libros, haz trabajar tu mente.”. Y tenía razón.
    • Mike Tyson (ex-campeón del mundo de los pesos pesados).

Hipocresia

Repele el nombre y la realidad.Se aparta uno del hipócrita reconocido como tal, como se guarda del enfermo declarado contagioso.Sin embargo las relaciones humanas estan penetradas en buena medida de la hipocresía.

Es hipocresía el disimulo de intenciones, los halagos en presencia y la crítica despiadada a las espaldas.Es hipocresía la promesa que sabemos que no vamos a cumplir. Es hipocresía ocultar cuidadosamente los defectos de la mercancia que ofrecemos como inmejorable y cantar de ella unas excelencias que sabemos que no tiene.Es hipocresía, y reviste en ocasiones particular malicia. mostrar solo el lado mas favorable, cuando es de justicia la manifestación completa de la personalidad y de las propias circunstancias.

Queremos que los demas nos tengan por mejores de lo que somos en cualquiera de las líneas de la perfección humana.Sabemos cuidar muy bien los detalles para lograrlo.No caemos en la cuenta de que todo eso es hipocresía, si no lo acompaña un esfuerzo sincero y constante para hacer realidad lo que deseamos que piensen de nosotros los demas.

WordPress: ficheros de template para categorias

[Fuente: http://codex.wordpress.org/Category_Templates]

Introducción

Desde que llegaron los Themes en WordPress 1.5,  cambiar el look and feel de tu web WordPress se ha hecho muy versatil. Por ejemplo, cuando un visitante de tu web hace click en un link de una de las categorias de tu site, es llevado a una page que lista los Posts de esa categoria en particular en orden cronológico empezando por el último. Hay muchas posibilidades de visualizacion, desde incluir el post completo a solo resumenees, y que información adicional (titulo, autor, fecha de publicacion, hora de la ultima modificacion, etc). Cada Theme tiene elecciones diferentes y tu querrias saber cambiarlas.

En este articulo se explica como cambiar lo que sucede cuando el visitante de tu blog esta visitando las páginas de categoria de tu web.Esto inclute hacerlo utilizando los ficheros de template.

Qué fichero de Template utilizamos?

El primer paso para modificar lo que sucede cuando alguien visita la pagina de una categoria es averiguar cual de los ficheros del theme va a ser utilizado para mostrar los posts. Esto viene en Template Hierarchy.

En el caso de las categorias, la jerarquia es muy simple. Por ejemplo, supongamos que el ‘slug’ de la categoria es ‘news’ y el Id de la categoria es 6. Entonces el Template Hierarchy especifica que WordPress utilizará el primer fichero de template que encuentre en la carpeta del theme de los siguientes:

  1. category-slug.php (Note: available with Version 2.9)
  2. category-ID.php
  3. category.php
  4. archive.php
  5. index.php

Asi , siguiendo con el ejemplo , si no existe category-news.php , WordPress mirará que haya un category-6.php y asi.

Con category.php cambias el look de todas las categorias.

Con archive.php cambiamos el look de todas las páginas archivadas.

Cambiando el index.php cambias el look de todo el blog.

Si necesitas crear un nuevo fichero, es una buena idea empezar haciendo una copia del siguiente fichero en la jerarquia. Por ejemplo, si queremos un look especial para la categoria 6 , empezamos por hacer una copia del fichero category.php, si este no esta, del archive.php y asi.

Ejemplos

En estos ejemplos , cuando decimos ‘edita el fichero de template’ nos referimos a editar el fichero que se ha elegido en el apartado anterior.

Añadiendo texto a la Category Pages

Texto estático sobre los Posts

Supongamos que queremos mostrar texto estático antes de la lista de posts en la category page. Por estático queremos decir que el texto permanece el mismo, no importa que posts sean mostrados debajo, y es para todas las categorias. Para hacerlo:

Encima de la seccion Loop (The Loop) del fichero de template en el que estes, inserta el siguiente código (no tiene misterio):

<p>This is some text that will display at the top of the Category page.</p>

Texto distinto en algunas paginas de categoria

A slightly more complex possibility is that you want different text to display depending on which category page the visitor is viewing. Then you would add the “default” text to the main category.php file, and create special category-#.php files (with their own version of the text, as described in the Introduction) for each category that needs special text at the top.

This does however create a lot of files in your theme directory, and can be avoided using the following code OUTSIDE the loop:

<?php if (is_category('Category A')) : ?>
<p>This is the text to describe category A</p>
<?php elseif (is_category('Category B')) : ?>
<p>This is the text to describe category B</p>
<?php else : ?>
<p>This is some generic text to describe all other category pages,
I could be left blank</p>
<?php endif; ?>

This does the following. Checks to see if we are looking at Category A, if we are then show the first bit of text, but if we’re not then check if we are looking at Category B. If we are then show that bit of text, and finally, if it is neither Category A or B, then show this default text.

Text Displaying Only on First Page of Archive

Another thing that can happen is that if your Category contains more posts than will fit on one page (according to the Options for Blog Reading you have set in the Administration panels of your blog), the category archive will split into multiple pages. And maybe you only want to display your static text if the viewer is on the first page of results, or you want to display different text for the other pages.

To make this happen, you can use a PHP if statement, which looks at the value of the $paged WordPress variable ($pagedis equal to the page number: 1 for the first page of results, 2 for the second page, etc.). It may sound complicated, but it’s actually not too bad. Just put the following above The Loop:

<?php if ( $paged < 2 ) : ?>
<p>Text for first page of Category archive.</p>
<?php else : ?>
<p>Text for subsequent pages of Category.
Can be left out.</p>
<?php endif; ?>

Category Name

Another possibility is to put the category name at the top of the page. If this is not already part of your template, you can add it by doing something like this, above The Loop:

<p>Category: <?php single_cat_title(); ?></p>

Modificando como los Post son mostrados

Excerpts vs. Full Posts

Perhaps you are looking to cut down on the size of your Category pages. You could do this by displaying excerpts rather than the entire content of each Post. To do this, you will just need to find where it says the_content() inside The Loop in your Template, and replace it with the_excerpt(). These will most likely be inside PHP tags:

  <?php the_excerpt(); ?>
and
  <?php the_content(); ?>

Conversely, if your Theme is currently displaying excerpts and you want full posts, replace the_excerpt with the_content.

Display Images Linking to Full Posts

Another thing that is interesting to do in a category archive page is to replace the post content with an image that links to your post. To do this, you will first need to put images into the Excerpt sections of your posts. Here’s how to do that, for one post:

  1. Upload an image on the post editing screen.
  2. Switch to the “Code” editor, rather than the “Visual” editor.
  3. Use the Uploads / Browse tab to insert the image into your post. Make sure to insert the full-sized image, with no link.
  4. Copy the inserted HTML img tag, and paste it into the “Optional Excerpt” section of the post editing screen.
  5. Finish writing the post content (you can remove the image), and publish the post.

Now you will need to modify your template. We’ll use a trick: the the_excerpt_rss() Template Tag does not put a paragraph tag around the excerpt. So we can use it to insert the img HTML and put it inside a link. Here’s what you need to put into your Template, in place of using the_content:

<a href="<?php the_permalink() ?>">
<?php the_excerpt_rss(); ?>
</a>

Caveat: using the excerpt this way may affect your RSS feed, because it places an img tag in the excerpt, instead of text. So if you are going to do this, you probably want to set your options so that the full posts are put in RSS feeds, rather than excerpts.

What categories do you show to the visitors?

You can limit the categories in archive and other pages with this code:

<?php query_posts('cat=1&posts_per_page='.get_option('posts_per_page')); ?>

This is placed before the Loop.

query_posts documentation: http://codex.wordpress.org/Template_Tags/query_posts

The get_option('posts_per_page') part of the code uses your blog’s options to show a limited number of posts.

This code is very useful if you would like to separate the categories. With this code you can make multiple archives. For example:

<?php if (have_posts()) : ?>
 <?php if (is_month()) {query_posts('year='.get_the_time('Y').'&monthnum='.get_the_time('m').'&author_name=admin&cat=1&posts_per_page='.get_option('posts_per_page')); ?>
  <!-- Do stuff... ->
 <?php } ?>
 <?php while (have_posts()) : the_post(); ?>
  <!-- post's contents -->
 <?php endwhile; ?>
<?php endif; ?>

If you use this code in archive.php and navigate to http://yourblog.com/2008/02/, it will show you the admin user’s post that is posted on 2008.02. in the “first” category.

Further Reading

Empezando con Spring MVC

(Fuente: http://blog.springsource.com/2011/01/04/green-beans-getting-started-with-spring-mvc/)

Spring MVC , como parte del core del Spring Framework, es un framework web al estilo de acción-respuesta, con un amplio rango de capacidades y opciones encaminadas a manejar una variedad de casos de uso web enfocados a interfaces gráficos o no gráficos.

Mostramos aquí como con muy poco podemos poner a funcionar una aplicación de Spring MVC.

Spring MVC incluye la mayoría de los conceptos básicos que tienen otros asi llamados MVC frameworks. Las requests entrantes entran al framework via un Front Controller. En el caso de Spring MVC, esto es de hecho una servlet de Java llamado DispatcherServlet. Pensemos en el DispatcherServlet como el guardián de la puerta. Realmente no ejecuta nada de lógica de negocio sino que delega en POJOs llamados Controllers que hacen realmente la tarea (que a su vez pueden invocar otros beans o el back-end). Cuando la tarea ha terminado, es responsabilidad de las Views producir una salida en el formato apropiado (tanto si es una página JSP, como un template de Velocity como una respuesta JSON). Diferentes estrategias se utilizan para decidir qué Controller (y qué método o métodos dentro del Controller) manejarán la request, y que View se utilizará para pintar la respuesta. El Spring container se utiliza para enlazar juntas todas las piezas. Se parece a algo como esto:

Configurando el inicio del DispatcherServlet y del Spring Container

Como mencionamos antes, todas las requests entrantes pasan por el DispatcherServlet. Como cualquier otro Servlet de una aplicación Java EE, le tenemos que decir al Java EE Container que cargue este Servlet en el comienzo de la aplicación web , para ello configuraremos el WEB-INF/web.xml.

El DispatcherServlet es también responsable de cargar un Spring ApplicationContext que será utilizado para realizar enlazado y inyecciones de dependencia de los componentes manejados. Sobre esta base, especificamos algunos parámetros de inicio al servlet los cuales configuran el Application Context. Veamos la configuración dentro del web.xml:

WEB-INF/web.xml:


<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<!-- Processes application requests -->
<servlet>
<servlet-name>appServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>appServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>

Comentemos una serie de cosas sobre lo configurado:

  • Registramos el DispatcherServlet como un servlet llamado appServlet
  • Mapeamos el Servlet para manejar requests de entrada (relativas al path de la aplicación) empezando con “/”
  • Utilizamos el parámetro ContextConfigLocation para personalizar el sitio donde tiene que buscar el fichero de configuración XML para que se cargue el Spring Application Context por parte del DispatcherServlet ,en vez de dejar el sitio por defecto que es: <servletname>-context.xml

Pero qué pasa si alguien no quiere configurar el Spring con un archivo XML?El tipo por defecto de Application Context cargado por el DispatcherServlet espera cargar al menos un fichero XML con definiciones de Spring. Como veremos, también habilitaremos Spring para cargar configuraciones hechas desde Java , además de las que ya vienen desde el XML

Todo el mundo tendrá su propia opinión en este punto, pero personalmente prefiero la configuración hecha desde el Java, si bien reconozco lo bueno que es poder cambiar configuraciones sin tener que recompilar.

Decir que quieres una configuración de Spring basada totalmente en Java , sin utilizar archivos XML , es posible hacerlo: hay que poner como parámetro de inicio en el web.xml para sobreescribir el tipo de Application Context y que use una variante llamadaAnnotationConfigWebApplicationContext en su vez.

En este ejemplo vamos a utilizar una forma híbrida.

El controlador (Controller)

Creamos ahora un Controller simple:

package xyz.sample.baremvc;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
* Handles requests for the application home page.
*/

@Controller
public class HomeController {

@RequestMapping(value = "/")
public String home() {
  System.out.println("HomeController: Passing through...");
  return "WEB-INF/views/home.jsp";
}

}

Veamos los aspectos clave de esta clase:

Esta clase ha sido anotada con la anotación @Controller, indicando que este es un Spring MVC Controller capaz de manejar peticiones web. Debido a que @Controller es una especialización de la anotación de estereotipo @Component , esta clase será automáticamente detectada por el contenedor de Spring como parte del proceso de escaneado de componentes del contenedor, creando una definición de bean y permitiendo a la instancias a ser inyectadas con dependencia como si el bean hubiera sido definido en el XML de Spring.

El método home ha sido anotado con @RequestMapping , especificando que este método debe manejar peticiones web  en el path “/” , es decir el path raíz de la aplicación.

Este método simplemente escribe una mensaje en el system out, y entonces retorna WEB-INF/views/home.jsp , indicando la vista que debe manejar la respuesta, en este caso una página JSP (veremos después como no tenemos porque hacer hardcoding de esta url).

Ahora necesitamos crear la vista. Esta página JSP simplemente imprimirá un saludo:

WEB-INF/views/home.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

Finalmente , como dijimos antes, necesitamos crear un fichero de definición de Spring Application Context mínimo:

WEB-INF/spring/appServlet/servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans
xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"

xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd

http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd

http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">

<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
<!-- Scans within the base package of the application for @Components to configure as beans -->
<!-- @Controller, @Service, @Configuration, etc. -->

<context:component-scan base-package="xyz.sample.baremvc" />
<!-- Enables the Spring MVC @Controller programming model -->

<mvc:annotation-driven />

</beans>

Examinemos los contenidos de este fichero:

Observamos que se utilizan unos cuantos Spring XML namespaces: context, mvc y el default beans.

Depués la declaración <context:component-scan> asegura que el contenedor Spring hará un escaneado , de forma que cualquier clase anotada con @Component o sus subtipos (tal como @Controller) es automáticamente descubierta. Notarás que por eficiencia, nos limitamos al paquete de nuestras clases.

La declaración <mvc:annotation-driven> configura un apoyo para Spring MVC de modo que enruta las requests a los @Controllers, asi como se manejan la conversión, formateado y validación.

LA web app está ahora lista para ejecutar. Asumiendo que el Servlet Container (el Server en nuestro caso) esté enganchado en localhost:8080, podemos iniciar la aplicación poniendo la URL http://localhost:8080/EjemploSimpleSpringMVC para que salga algo como esto:

Tan trivial como es, esta aplicación incluye todas las piezas principales de una aplicación Spring MVC. Veamos las consecuencias más importantes e interacciones entre los componentes:

Cuando la aplicación web comienza, el DispatcherServlet se carga e inicializa por la entrada que hay dentro del web.xml.

El DispatcherServlet carga un Application Context basado en anotaciones, que ha sido configurado para escanear para componentes anotados a través de la expresión regular que especifica el paquete base.

Los componentes anotados tales como el HomeController son detectados por el contenedor.

Cuando ponemos http://localhost:8080/EjemploSimpleSpringMVC en el navegador esto va al servlet engine y es enrutado a la aplicación web.

El path “/” implícito al final de la URL engancha con la regex que ha sido registrada por el DispatcherServlet, y la petición es enrutada a ella.

El DispatcherServlet necesita decidir qué hacer con la request. Utiliza una estrategia llamada una HandlerAdapter para decidir donde enrutar la request. El tipo de HandlerAdapter especifico (o tipos , ya que pueden estar encadenados) a ser utilizados pueden ser customizados , pero por defecto, una estrategia basada en anotaciones se usa, lo cual enruta la request apropiadamente a métodos específicos en clases anotadas como @Controller, basándose en el criterio de matching en las anotaciones @RequestMapping encontradas en esas clases. En este caso, la regex del método home es enganchado, y por tanto es el método invocado para manejar la request.

El método home hace el trabajo , en este caso solo saca un mensaje. Entonces retorna una string que en este caso, es un jsp explicito , pero que puede ser de otra forma y es lo que hace que la response sepa que View elegir.

El DispatcherServlet otra vez se apoya en la estrategia, llamando a un ViewResolver para decidir que View es responsable de renderizar la respuesta. Esto puede ser configurado como se necesite para la aplicación (de una forma simple o al estilo cadena), pero por defecto, se utiliza InternalResourceViewResolver . Este es un view resolver que produce una JstlView que simplemente delega al RequestDispatcher del motor de Servlet ,y por tanto se puede trabajar con páginas JSP y con paginas estáticas HTML.

Por último el Servlet engine renderiza la response via el JSP especificado.

WordPress: desarrollo de themes

[Fuente: http://codex.wordpress.org/Theme_Development]

El porqué de WordPress Themes

Los WordPress Themes son un conjunto de ficheros que juntos crean el diseño y la funcionalidad de una web hecha con WordPress. Cada Theme puede ser distinto, ofreciendo muchas posibilidades para los propietarios de una web para poder cambiar instantanemente el look del site.

Puedes querer programar los WordPress Themes para tu propio uso, para el proyecto de un cliente o para subirlo al WordPress Thme Directory. ¿Por qué querrias construir un WordPress Theme?

  • Para crear un look uniforme a tu web en WordPress.
  • Para tener las ventajas de templates , template tags y el WordPress Loop para generar distintos resultados y looks en la web.
  • Para proporcionar templates alternativos para caracteristicas especificas, como por ejemplo las páginas de categoria y páginas de resultados.
  • Para rápidamente cambiar entre dos templates , o aprovechar el Theme or style siwtcher que permite a los propietarios del site cambiar el look de la web.

Un WordPress theme tiene muchos beneficios también:

  • Separa los estilos de presentación y ficheros de template del resto de ficheros del sistema asi que la web se actualizará sin cambios drásticos cuando cambiemos su presentación visual.
  • Permite la personalización de la funcionalidad del site unico para ese Theme
  • Permite cambios rápidos del diseño visual y layout de una web hecha con WordPress
  • Elimina la necesidad de que el propietario de la web tenga que aprender CSS, HTML y PHP y poder tener una web con un aspecto visual avanzado.

¿Por qué querrias hacer tu propio WordPress Theme? Esa es la cuestión importante.

  • Es una oportunidad para aprender más sobre CSS, HTML y PHP
  • Es una oportunidad para hacerte experto en CSS, HTML y PHP
  • Es creativa
  • Es divertido (la mayor parte del tiempo)
  • Si tu haces público el Theme, la satisfacción de hacer algo por la comunidad WordPress.

Desarrollo de Themes estandar

Los WordPress Themes deben ser programados siguiendo los siguientes estandars:

Anatomía de un Theme

Los WordPress Themes viven en subdirectorios que residen en wp-content/themes/. El subdirectorio de un Theme contiene todos los ficheros de estilos , ficheros del template , y ficheros de funciones opciones (functions.php) , ficheros Javascript , e imagenes. Por ejemplo, un Theme llamado “test ” estaría en el directorio wp-content/themes/test/. Intenta no poner números al nombre del theme, ya que esto le impide salir en la lista de themes disponibles.

WordPress incluye un theme por defecto en cada nueva instalación. Examina los ficheros por defecto con cuidado para tener una mejor idea de como haremos nuestros prorios Theme files.

Para una guia visualFor a visual guide, see this infographic: http://yoast.com/wordpress-theme-anatomy/

Los WordPress Themes tipicamente se componen de tres tipos de ficheros, aparte de imagenes y ficheros Javascript. Una es el stylesheet llamado style.css, el cual controla la presentación (diseño visual  y layout) de las páginas web. El segundo es el fichero opcional de funciones functions.php . Los otros ficheros son los ficheros de template que controlan la forma en que las páginas del site generan la información desde la BBDD de WordPress para ser mostrada en el site. Es lo que vamos a examinar a continuación.

Un Child Theme

Un Child Theme es el theme más simple posible .Incluye solo el fichero style.css, más alguna imagen. Esto es posible porque es hijo de otro theme que actua como su padre.Para más info sobre ellos ver  Child Themes or this great tutorial by op111.

La Theme Stylesheet (la CSS)

Además de información de estilo para el thme , style.css proporciona detalles sobre el Them en la forma de comentarios. El stylesheet debe proporcionar detalles sobre el Theme en la forma de comentarios. No se permite que dos Themes tengan los mismos detalles listados en los comentarios de cabecera, ya que esto lleva a problemas en el dialogo  de selección de Theme. Si haces tu propio Theme copiando uno existente, asegurate de cambiar esta información primero.

Los siguiente es un ejemplo de las primeras lineas del CSS del Theme “Twenty Ten”:

/*

Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:
License URI:

General comments (optional).
*/

Estas lineas de comentarios del style.css son requeridas para que el WordPress sea capaz de identificar y mostrarlo en la panel de Administracion como un theme disponible junto con el resto de los que haya instalados.

Guias de diseño de un hoja de estilo

Sigue los CSS coding standards cuando construyas el CSS.

  • Utiliza CSS válido siempre que puedas. Como excepción, utiliaz prefijos especificos de navegador para conseguir ventajas del CSS3
  • Minimiza los CSS hacks salvo cuando son para cosas especificas que ofrece un navegador en concreto.
  • Todos los posibles elementos HTML deben ser dado estilo por el Theme , tanto en el contenido ya sea pagina o post y en el contenido del comentario.
    • Tables, captions, images, lists, block quotes, et cetera.
  • Añade estilos printer-friendly es altamente recomendado.
    • Se puede incluir un print stylesheet con media=”print” o añadir un bloqye de print media en tu CSS principal.

Fichero Functions

Un Theme puede opcionalmente utilizar un fichero functions, que reside en la carpeta del theme y se llama functions.php. Este fichero basicamente  actua como un plugin, y si está presente en el theme que estás utilizando, automaticamente es cargado durante la inicializacion de WordPress (tanto en las páginas de administración como en las páginas externas). Los usos sugeridos para este fichero son:

El tema por defecto que viene con WordPress contiene un functions.php que define muchas de estas caracteristicas, asi que puedes querer utilizarlo como modelo. Ya que functions.php básicamente funciona como un plugin , la Function_Reference es el mejor lugar para tener más información sobre qué se puede hacer con este fichero.

Ficheros de Template

Los ficheros de template son ficheros con codigo fuente PHP utilizados para generar las páginas pedidas por los visitantes, y su salida es HTML. Veamos todos los ficheros de este tipo que se pueden definir.

WordPress te permite definir ficheros de template separados para los distintos aspectos de la web. No es esencial, sin embargo, tener todos estos ficheros de template para que el theme funcione. Los ficheros de template son elegidos y generados basandose en la Template Hierarchy (son como piezas de un puzzle).

Como programador de Themes, puedes decidir la cantidad de personalizacion que quieres utilizando estos ficheros de template. Por ejemplo , como caso extremo, puedes utilizar uno solo , el index.php como el template para todos los posts y pages generados por la web. Lo más comun es tener varios ficheros de template que generan resultados diferentes , para asi permitir una mejor personalización.

Lista de Ficheros de Template

Presentamos a continuación una lista de los ficheros de template reconocidos por WordPress. Desde luego, tu propio Theme puede contener otros ficheros de CSS, images, js. Solo ten en cuenta que estos tienen significado especial para WordPress.

  • style.css
    • The main stylesheet. This must be included with your Theme, and it must contain the information header for your Theme.
  • rtl.css
    • The rtl stylesheet. This will be included automatically if the website direction is RTL. you can generate it using a plugin called the RTLer.
  • index.php
    • The main template. If your Theme provides its own templates, index.php must be present.
  • comments.php
    • The comments template.
  • front-page.php
  • home.php
    • The home page template, which is the front page by default. If you use a static front page this is the template for the page with the latest posts.
  • single.php
    • The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
  • single-<post-type>.php
    • The single post template used when a single post from a custom post type is queried. For example, single-books.phpwould be used for displaying single posts from the custom post type booksindex.php is used if the query template for the custom post type is not present.
  • page.php
    • The page template. Used when an individual Page is queried.
  • category.php
  • tag.php
  • taxonomy.php
    • The term template. Used when a term in a custom taxonomy is queried.
  • author.php
  • date.php
    • The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.
  • archive.php
    • The archive template. Used when a category, author, or date is queried. Note that this template will be overridden bycategory.phpauthor.php, and date.php for their respective query types.
  • search.php
    • The search results template. Used when a search is performed.
  • attachment.php
    • Attachment template. Used when viewing a single attachment.
  • image.php
    • Image attachment template. Used when viewing a single image attachment. If not present, attachment.php will be used.
  • 404.php
    • The 404 Not Found template. Used when WordPress cannot find a post or page that matches the query.

Estos ficheros tienen un significado especial para WordPress porque son utilizados como sustitución de index.php cuando están presentes, siempre de acuerdo a la Template Hierarchy, y cuando la correspondiente Conditional Tag retorna true. Por ejemplo, si estamos visualizando un post simple , entonces la funcion is_single() retorna true, y , si hay un archivo llamado single.php , entonces será el archivo template utilizado para mostrar esa página.

Ficheros de Template Básicos

Como mínimo , un Theme de WordPress se compone de dos ficheros:

  • style.css
  • index.php

Ambos ficheros residen en el directorio del Theme.El archivo index.php es muy flexible. Puede ser utilizado para incluir todas las referencias al header, sidebar, footer, content, categories, archives, search, error, y cualquier otra pagina creado en WordPress.

O puede ser dividido en ficheros de template tipo modulo, cada una cogiendo una parte del workload. Si no pones ningun otro fichero de template , WordPress utilizará un de la version por defecto. Por ejemplo, si no tienes un archivo de template comments.php, WordPress automaticamente utilizará wp-comments.php.

Los ficheros de template más típicos son:

  • comments.php
  • footer.php
  • header.php
  • sidebar.php

Utilizando estos ficheros de template puedes poner template tags dentro del index.php para hacer que se incluyan en las páginas generadas:

Here is an example of the include usage:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

For more on how these various Templates work and how to generate different information within them, read theTemplates documentation.

Ficheros de Template para personalizar las Pages

The files defining each Page Template are found in your Themes directory. To create a new Custom Page Template for a Page you must create a file. Let’s call our first Page Template for our Page snarfer.php. At the top of the snarfer.php file, put the following:

<?php
/*
Template Name: Snarfer
*/
?>

The above code defines this snarfer.php file as the “Snarfer” Template. Naturally, “Snarfer” may be replaced with most any text to change the name of the Page Template. This Template Name will appear in the Theme Editor as the link to edit this file.

The file may be named almost anything with a .php extension (see reserved Theme filenames for filenames you should notuse; these are special file names WordPress reserves for specific purposes).

What follows the above five lines of code is up to you. The rest of the code you write will control how Pages that use the Snarfer Page Template will display. See Template Tags for a description of the various WordPress Template functions you can use for this purpose. You may find it more convenient to copy some other Template (perhaps page.php or index.php) to snarfer.php and then add the above five lines of code to the beginning of the file. That way, you will only have to alterthe HTML and PHP code, instead of creating it all from scratch. Examples are shown below. Once you have created the Page Template and placed it in your Theme’s directory, it will be available as a choice when you create or edit a Page. (Note: when creating or editing a Page, the Page Template option does not appear unless there is at least one template defined in the above manner.)

Ficheros de Template Query-based

WordPress can load different Templates for different query types. There are two ways to do this: as part of the built-inTemplate Hierarchy, and through the use of Conditional Tags within The Loop of a template file.

To use the Template Hierarchy, you basically need to provide special-purpose Template files, which will automatically be used to override index.php. For instance, if your Theme provides a template called category.php and a category is being queried, category.php will be loaded instead of index.php. If category.php is not present, index.php is used as usual.

You can get even more specific in the Template Hierarchy by providing a file called, for instance, category-6.php — this file will be used rather than category.php when generating the page for the category whose ID number is 6. (You can find category ID numbers in ManageCategories if you are logged in as the site administrator in WordPress version 2.3 and below. In WordPress 2.5 the ID column was removed from the Admin panels. You can locate the category id by clicking ‘Edit Category’ and looking on the URL address bar for the cat_ID value. It will look ‘…categories.php?action=edit&cat_ID=3’ where ‘3’ is the category id). For a more detailed look at how this process works, see Category Templates.

If your Theme needs to have even more control over which Template files are used than what is provided in the Template Hierarchy, you can use Conditional Tags. The Conditional Tag basically checks to see if some particular condition is true, within the WordPress Loop, and then you can load a particular template, or put some particular text on the screen, based on that condition.

For example, to generate a distinctive stylesheet in a post only found within a specific category, the code might look like this:

<?php
if ( is_category( '9' ) ) {
    get_template_part( 'single2' ); // looking for posts in category with ID of '9'
} else {
    get_template_part( 'single1' ); // put this on every other category post
}
?>

Or, using a query, it might look like this:

<?php
$post = $wp_query->post;
if ( in_category( '9' ) ) {
    get_template_part( 'single2' );
} else {
    get_template_part( 'single1' );
}
?>

In either case, this example code will cause different templates to be used depending on the category of the particular post being displayed. Query conditions are not limited to categories, however, see the Conditional Tags article to look at all the options.

Defining Custom Templates

It is possible to use the WordPress plugin system to define additional templates that are shown based on your own custom criteria. This advanced feature can be accomplished using the template_redirect action hook. More information about creating plugins can be found in the Plugin API reference.

Including Template Files

To load another template (other than header, sidebar, footer, which have predefined included commands likeget_header()) into a template, you can use get_template_part(). This makes it easy for a Theme to reuse sections of code.

Referenciar ficheros desde un archivo de template

When referencing other files within the same Theme, avoid hard-coded URIs and file paths. Instead reference the URIs and file paths with bloginfo().

Note that URIs that are used in the stylesheet are relative to the stylesheet, not the page that references the stylesheet. For example, if you include an images/ directory in your Theme, you need only specify this relative directory in the CSS, like so:

h1 {
    background-image: url(images/my-background.jpg);
}

Plugin API Hooks

Cuando se están programando Thmes , es bueno recordar que tu tema debe estar configurado de forma que funcione bien con cualquier plugin de WordPress que los usuarios decidan instalar. Los plugins añaden funcionalidad a WordPress a través de lo que se llama “Action Hooks“.

La mayoria de los Actions Hooks están dentro del código PHP core de WordPress , asi que tu Theme no tiene que tener ninguna tag especial para que estos funcionen. Pero unos pocos Action Hooks necesitan estar presentes en tu Theme, para cuando queremos que los Plugins muestren informacion directamente en tu header, footer, sidebar o el body de la pagina. Veamos una lista de tags especiales de Action Hooks que necesitarias incluir:

wp_head()

Goes in the <head> element of a theme, in header.php. Example plugin use: add JavaScript code.
wp_footer()
Goes in footer.php, just before the closing </body> tag. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer. Very commonly used to insert web statistics code, such as Google Analytics.
wp_meta()
Typically goes in the <li>Meta</li> section of a Theme’s menu or sidebar; sidebar.php template. Example plugin use: include a rotating advertisement or a tag cloud.
comment_form()
Goes in comments.php directly before the comment form’s closing tag (</form>). Example plugin use: display a comment preview. As of WordPress 3.0, you should use the default comment form instead, see comment_form().

For a real world usage example, you’ll find these plugin hooks included in the default Theme’s templates.

Untrusted Data

You should escape dynamically generated content in your Theme, especially content that is output in HTML attributes. As noted in WordPress Coding Standards, text that goes into attributes should be run through esc_attr so that single or double quotes do not end the attribute value and invalidate the XHTML and cause a security issue. Common places to check are titlealt, and value attributes.

In a few cases there might already be a template tag for common cases where safe output is needed. One such case involves the “title” attribute when used with the_title() for post and page titles. To avoid a security vulnerability, usethe_title_attribute() instead. Here’s an example of correct escaping for the title attribute in a post title link when using translatable text:

<?php echo esc_attr( sprintf( __( 'Permanent Link to %s', 'theme-name' ), the_title_attribute( 'echo=0' ) ) ); ?>

Replace deprecated escape calls with the correct calls: wp_specialcharshtmlspecialchar with esc_htmlclean_url withesc_url, and attribute_escape with esc_attr. See Data_Validation for more.

Translation / i18n Support

To ensure smooth transition for language localization, use the gettext functions for wrapping all translatable text within the template files. This makes it easier for the translation files to hook in and translate the titles into the site’s language. See more at WordPress_Localization and i18n for WordPress Developers.

Theme Classes

Implement the following template tags to add WordPress-generated class attributes to body, post, and comment elements. For post classes, apply only to elements within The Loop.

Template File Checklist

When developing a Theme, check your template files against the following template file standards.

Document Head (header.php)

  • Use the proper DOCTYPE.
  • The opening <html> tag should include language_attributes().
  • The “content-type” meta element should be placed before everything else, including the title element.
  • Use bloginfo() to fetch the title and description.
  • Use automatic feed links to add feed links.
  • Add a call to wp_head(). Plugins use this action hook to add their own scripts, stylesheets, and other functionality.

Here’s an example of a correctly-formatted HTML5 compliant head area:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

Navigation Menus (header.php)

  • The Theme’s main navigation should support a custom menu with wp_nav_menu().
    • Menus should support long link titles and a large amount of list items. These items should not break the design or layout.
    • Submenu items should display correctly. If possible, support drop-down menu styles for submenu items. Drop-downs allowing showing menu depth instead of just showing the top level.

Widgets (sidebar.php)

  • The Theme should be widgetized as fully as possible. Any area in the layout that works like a widget (tag cloud, blogroll, list of categories) or could accept widgets (sidebar) should allow widgets.
  • Content that appears in widgetized areas by default (hard-coded into the sidebar, for example) should disappear when widgets are enabled from Appearance > Widgets.

Footer (footer.php)

  • Use a wp_footer() call, to appear just before closing body tag.
<?php wp_footer(); ?>
</body>
</html>

Index (index.php)

  • Display a list of posts in excerpt or full-length form. Choose one or the other as appropriate.
  • Include wp_link_pages() to support navigation links within posts.

Archive (archive.php)

  • Display archive title (tag, category, date-based, or author archives).
  • Display a list of posts in excerpt or full-length form. Choose one or the other as appropriate.
  • Include wp_link_pages() to support navigation links within posts.

Pages (page.php)

  • Display page title and page content.
  • Display comment list and comment form (unless comments are off).
  • Include wp_link_pages() to support navigation links within a page.
  • Metadata such as tags, categories, date and author should not be displayed.
  • Display an “Edit” link for logged-in users with edit permissions.

Single Post (single.php)

  • Include wp_link_pages() to support navigation links within a post.
  • Display post title and post content.
    • The title should be plain text instead of a link pointing to itself.
  • Display the post date.
    • Respect date and time format settings unless it’s important to the design. (User settings for date and time format are in Settings > General.)
    • For output based on the user setting, use the_time( get_option( 'date_format' ) ).
  • Display the author name (if appropriate).
  • Display post categories and post tags.
  • Display an “Edit” link for logged-in users with edit permissions.
  • Display comment list and comment form.
  • Show navigation links to next and previous post using previous_post_link() and next_post_link().

Comments (comments.php)

  • Author comment should be highlighted differently.
  • Display gravatars (user avatars) if appropriate.
  • Support threaded comments.
  • Display trackbacks/pingbacks.
  • This file shouldn’t contain function defines unless in a function_exist() check to avoid redeclaration errors. Ideally all functions should be in functions.php.

Search Results (search.php)

  • Display a list of posts in excerpt or full-length form. Choose one or the other as appropriate.
  • The search results page show the previous search term. It’s a simple but useful way to remind someone what they just searched for — especially in the case of zero results. Use the_search_query or get_search_query (echo or return the value). For example:
    <h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2>
  • It’s a good practice to include the search form again on the results page. Include it with: get_search_form().

JavaScript

  • JavaScript code should be placed in external files whenever possible.
  • Use wp_enqueue_script to load your scripts.
  • JavaScript loaded directly into HTML documents (template files) should be CDATA encoded to prevent errors in older browsers.
<script type="text/javascript">
/* <![CDATA[ */
// content of your Javascript goes here
/* ]]> */
</script>

Screenshot

Create a screenshot for your theme. The screenshot should be named screenshot.png, and should be placed in the top level directory. The screenshot should accurately show the theme design, and it could be saved in PNG, JPEG or GIF format. The recommended image size is 300×225.

Theme Options

Themes can optionally include an options page. For example code, see A Sample WordPress Theme Options Page.

When enabling an options page, use the edit_theme_options capability instead of switch_themes for options panels, unless the user actually should be able to switch Themes to be able to use your options panel. WordPress itself uses theedit_theme_options capability for menus, background, header, widgets, et cetera. See more at Roles and Capabilities andAdding Administration Menus.

A note about network mode and Theme options:

If you are using the edit_themes capability anywhere in your Theme, and the Theme is running on a network-enabled WordPress install (previously WordPress MU), be aware that the edit_themes capability used for accessing Theme options pages will prevent site admins in a network from seeing the options menu. Use edit_theme_options instead.

Theme Testing Process

  1. Fix PHP and WordPress errors. Add the following debug setting to your wp-config.php file to see deprecated function calls and other WordPress-related errors: define('WP_DEBUG', true);. See Deprecated Functions Hook for more information.
  2. Check template files against Template File Checklist (see above).
  3. Do a run-through using the Theme Unit Test.
  4. Validate HTML and CSS. See Validating a Website.
  5. Check for JavaScript errors.
  6. Test in all your target browsers. For example, IE7, IE8, IE9, Safari, Chrome, Opera, and Firefox.
  7. Clean up any extraneous comments, debug settings, or TODO items.
  8. See Theme Review if you are publicly releasing the Theme by submitting it to the Themes Directory.

Resources and References

Code Standards

Theme Design

CSS

Templates

Testing and QA

Release & Promotion

External Resources & Tutorials

Tutorial para maquetar una página web utilizando CSS en lugar de tablas

Vamos a realizar un ejercicio de maquetación de una página web utilizando únicamente hojas de estilo en cascada (CSS), separando completamente el contenido del archivo HTML de las definiciones del aspecto, que se guardarán en un archivo .css. El ejercicio lo realizaremos paso a paso, partiendo de una imagen diseñada previamente con un programa de edición gráfica como Photoshop.

Imágenes de partida

Podemos ver la imagen que hemos creado y que vamos a intentar maquetar lo más parecido posible. No es el objetivo de este manual ofrecer las técnicas para realizar esta imagen, aunque en otros manuales de DesarrolloWeb.com podemos ver tutoriales para aprender algunos de los trucos de diseño utilizados.

Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados con los que trabajar.

De esta imagen hemos extraído algunos gráficos, que utilizaremos a la hora de maquetar el diseño. Sería interesante descargarlo para poder realizar el ejercicio por vuestra cuenta.

Bullet.gif Fondo.gif
Fondonav.gif Go.gif

Cabecera.jpg

Para los impacientes, tenemos un enlace a la página resultado que vamos a conseguir realizar al final del artículo. Puede ser bueno verla para hacerse una idea de donde queremos llegar.

Desarrollo de la página y la hoja de estilos

Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos explicar las etiquetas y estilos que hemos utilizado para cada parte de la página.

Como primer paso, en la cabecera <head> del documento HTML, enlazaremos con una hoja de estilos externa.

[codebox 1]

El cuerpo de la página <body>

En la declaración de estilos CSS, para el cuerpo de la página, hemos definido una imagen de fondo “fondo.gif”, que se repetirá por toda la página en un mosaico. También se definen unos márgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la página aparezca en el centro (esto es necesario para Internet Explorer, el centrado en Mozilla y otros navegadores se realiza en la capa principal con el atributo “margin” definido como “auto”).

Además se definen otros atributos para el cuerpo de la página, que luego heredarán otros elementos, como el tipo de letra o el color del texto.

[codebox 2]

La capa contenedor

Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de esta capa se colocan todos los elementos que va a tener la página.

[codebox 3]

En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo habíamos centrado el texto, para que Internet Explorer centre la capa contenedor y deseamos que la alineación por defecto sea a izquierda). También definimos una anchura de 700px, un color de fondo blanco y el margen, con el atributo “margin”, lo definimos como “auto”, para que Mozilla y otros navegadores centren la capa.

[codebox 4]

Por cierto, nos hemos dejado deliberadamente el borde de la capa, que habíamos definido en el diseño original. Se podría haber definido el atributo “border”, pero eso nos repercute negativamente en la maquetación en Explorer. Veremos más adelante cómo colocarlo para que se vea correctamente en todos los navegadores.

La cabecera de la página

La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es lo más cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración.

[codebox 5]

Vemos que es una simple imagen, pero atención, que tenemos que colocar el </div> a continuación de <img> sin ningún espacio ni salto de línea, porque si no, Internet Explorer, nos introducirá un pequeño márgen debajo de la imagen, que queremos evitar.

Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos que sean las mismas que las de la imagen. Aunque en este caso podríamos habernos ahorrado definir esos valores porque son los que se tomarían por defecto.

[codebox 6]

La barra de navegación

Vamos con la capa utilizada para definir la barra de navegación horizontal que hay debajo de la cabecera.

[codebox 7]

Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay que fijarse que además los enlaces tienen una clase, llamada “enlacenav”, que utilizaremos para darle un estilo específico a a estos enlaces, independiente del definido por defecto en la página.

Por lo que respecta a la capa, se define un color y una imagen de fondo, unos márgenes internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de abajo.

[codebox 8]

Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los estados de los enlaces (visitados, activos, no visitados, etc), se utilizan las pseudo-clases VISITED, ACTIVE, FOCUS, LINK Y HOVER. Simplemente definimos el color de los enlaces, el mismo para todas las pseudo-clases, menos para HOVER, que tiene un color distinto. HOVER es el estado del enlace cuando el puntero ratón está situado encima. En este caso, cuando el ratón esté encima, cambiará de color.

[codebox 9]

El cuerpo de la página (contenido)

La parte de la página donde colocamos la información principal. Crearemos una capa independiente para el cuerpo y colocaremos dentro el título, el texto y otros elementos que queramos situar. Los elementos los introducimos con las etiquetas HTML que deberían tener en una página básica. Luego, con CSS definiremos el estilo para el cuerpo y cada una de las etiquetas que colocamos dentro.

[codebox 10]
Vemos que el cuerpo tiene un título, varios párrafos y un div, incluido dentro del propio cuerpo, con una segunda barra de enlaces que faciliten la navegación para las personas que lleguen al final del scroll vertical de la página.

Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo. Además, se define el atributo “float:left” para hacer que el cuerpo “flote” a la izquierda. El resultado es que la capa del cuerpo se coloque a la izquierda y el contenido escrito a continuación se sitúe, rodeando a esta capa, a la derecha. (El efecto es el mismo que si asignamos en HTML el atributo align=left en una imagen)

Para posibilitar la disposición en dos columnas que hemos definido en el diseño original, vamos a hacer que la capa de la izquerda -el cuerpo- “flote” a la izquierda. Posteriormente, la capa de la derecha que aún no hemos colocado-el lateral-, haremos que “flote” a la derecha.

[codebox 11]

También se define un estilo para cada algunas de las etiquetas que hemos situado dentro del cuerpo:

[codebox 12]

Los encabezados de nivel 1, que tengan tamaño de letra 12pt.

[codebox 13]

Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para facilitar la navegación.

La capa lateral

En el lateral derecho situamos una nueva capa, que ofrece acceso a servicios y otras informaciones.

[codebox 14]

El contenido que vamos a situar dentro de esta capa lo veremos por partes, pues tiene bastantes detalles que destacar tranquilamente. Los estilos son los siguientes:

[codebox 15]

Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral izquierda y abajo, los otros dos lados no tendrán borde por estar en contacto con los bordes de otros elementos.

Además, con el atributo float:right, indicamos que este lateral debe “flotar” hacia la derecha. Así, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una disposición en 2 columnas.

Veremos a continuación los elementos que vamos a colocar dentro de la capa lateral, en una especie de cajas independientes. Aunque, antes de ver esas cajas una a una, merece la pena conocer en líneas generales cómo van a crearse. Cada caja tendrá este código HTML, compuesto por un titulo y un contenido de la caja:

[codebox 16]

El título lo incluimos con una etiqueta <h2> y la parte de la caja con el contenido, se define con un div. Cada uno de estos elementos tiene una clase, que se aplicará a los mismos elementos en cada una de las cajas, de modo que todos los elementos del lateral compartan un mismo estilo.

[codebox 17]

El encabezado de nivel 2 utiliza la clase “titlat”, que define un color de fondo, un color del texto, un tamaño de letra, un cambio a mayúsculas de las letras del título, unos márgenes internos, peso de letra normal (no negrita, como suelen ser los encabezamientos por defecto), un espaciado de letras de 2 pixel y un margen. Los titulares llevan asociado un salto de línea doble arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixels, menos en la parte de abajo, que tendrá 8 pixel.

Las cajas laterales también tienen un estilo, que se aplica a todos los cuerpos de las cajas que hay en el lateral. Ese estilo simplemente define unos márgenes internos.

Caja de buscar

Uno de los elementos que vamos a colocar dentro del lateral es una caja de búsqueda, con un formulario para realizar búsquedas internas, dentro del sitio, y en todo el web.

Esa caja de búsqueda se coloca en un formulario. Hemos puesto diversos identificadores a los elementos que hay dentro del formulario, para poder aplicar estilos a cada componente por separado. Aunque algunos de estos selectores ni siquiera los hemos llegado a utilizar, pueden venir bien si queremos hacer en el futuro modificaciones de la hoja de estilos para actualizar el diseño del web.

[codebox 18]

Los elementos que hemos definido en la hoja de estilos para este pequeño formulario son los siguientes:

[codebox 19]

Con ello definimos que los campos de texto tienen un tamaño de letra de 8 puntos.

[codebox 20]

El formulario, que está situado dentro de la capa fbuscar, no debe tener márgenes, ni arriba ni abajo.

[codebox 21]

La capa “campotexto”, donde está el campo de texto, hemos definido que debe “flotar” a la izquerda.

#campotexto input{
  width:100px;
}

El input que hay dentro de la capa campotexto debe tener 100 pixels de ancho.

#botonbuscar {
 padding-top : 3px;
 padding-left: 106px;
 }

La capa donde está el botón de submit, que en este caso es una imagen de submitir (<input type=”imagen”>), tiene un margen interno de 3 pixels por arriba, y de 106 por el lado izquierdo. Los 106 pixels de ancho salen de los 100 que ocupa el campo de texto que hay a la izquierda, más 6 pixeles adicionales, que son el verdadero margen que habrá entre el campo de texto y la imagen de submitir.

#botonbuscar input{
border : 0px none;
}

Con esta última definición estamos indicando que la imagen de submitir (el <input type=”image”> que hay dentro de la capa botonbuscar) no tenga borde.

.radio{
clear:both;
}

Esta clase, que afecta a las capas donde están los botones de radio, define que no deben haber elementos “flotando” ni a la izquierda ni a la derecha, de los botones de radio.

La caja de registro

En la siguiente caja del lateral aparece un pequeño texto invitando a registrarse al visitante.

<div id=”registro”>
<a href=”#”>Registrese con nosotros</a> y obtenga muchas ventajas.
</div>

Esta capa no tiene ningún estilo específico, simplemente se comporta heredando los estilos de otras capas y con los que se han definido en las clases que se utilizan.

La caja de otras informaciones

Situaremos una última caja dentro del lateral, que contiene enlaces a otras informaciones. Dentro de la caja colocaremos varios enlaces dentro de una lista.

<h2>Otras informaciones</h2>
<div id=”otras”>
<ul>
<li><a href=”#”>Quienes somos</a>
<li><a href=”#”>Nuestra misión</a>
<li><a href=”#”>Agenda de eventos</a>
</ul>
</div>

Para personalizar el estilo de la lista de enlaces se utilizan los siguientes estilos.

#otras ul{
margin : 5px 10px 0px 0px;
padding: 0px 0px 0px 4px;
list-style: none;
}

Por un lado tenemos el estilo definido para toda la lista de elementos. En este caso se eliminan los márgenes que este tipo de listas tienen implícitos. Se coloca también un margen interno 4 pixel a la izquierda y cero en el resto de las posiciones. Con “list-style:none” se indica que no se desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a continuación nosotros manualmente como fondo de los <li>.

#otras li{
padding-left: 14px;
background: transparent url(“images/bullet.gif”) 0 2px no-repeat;
margin-bottom: 10px;
}

Por otra parte, para cada uno de los elementos de la lista, de define un espacio de 14 pixel a la izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeñas imágenes que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. También se define un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro diseño. También se define un margen en la parte inferior.

Después de integrar todo lo que hemos visto en este ejercicio para crear el lateral de la página, el diseño queda tal como se puede ver en esta página.:

Pie de la página
Este elemento no lo habíamos previsto en la imagen original, creada previamente, pero lo hemos decidido colocar porque lo necesitamos, para que en la parte donde está el cuerpo y el lateral, aparezca el fondo de color blanco. En Explorer aparece el fondo blanco sin ningún problema, pero en Mozilla y otros navegadores, al estar las dos capas de cuerpo y lateral “flotando” a izquierda y derecha, no entiende que deba mantener el fondo blanco definido en el container.

No se si se entiende esto bien, pero lo mejor es hacer una prueba y ver lo que hemos definido hasta el momento en la plantilla en Firefox o Mozilla. Veremos que el fondo blanco no está continuado hacia abajo.

<div id="pie">
 Pruebas de maquetación CSS © 2005 DesarrolloWeb.com
 </div>

Esta capa tiene el siguiente estilo definido:

#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}

Con “clear:both” indicamos que la capa debe mostrarse sin elementos flotando a izquierda y derecha, de modo que la posición de la capa será inmediatamente por debajo de la capa cuerpo y lateral.

Luego se define un color para el texto una alineación de texto, unos márgenes y un margen interno por la parte de debajo de 10 pixel.

El borde externo

El diseño original incluía un borde de 2 pixel rodeando a toda la capa principal. Podemos hacer la prueba de incluir un borde en la capa contenedor. Para ello hay que añadir en el estilo para la capa contenedor el atributo border, de la siguiente manera.

#contenedor{
  text-align: left;
  border: 2px solid #cccccc;
  width: 700px;
  margin: auto;
  background-color : #ffffff;
}

En Mozilla y navegadores similares, todo es correcto. Pero en Internet Explorer la cosa tiene su problema. Esto es debido a que el espacio de los bordes, en Explorer, se toma del que se haya asignado a la propia capa y en Mozilla y otros navegadores, se toma como espacio adicional, aparte del que se haya asignado a la capa en si.

Lo mejor es probarlo y verlo por uno mismo, o bien encontrarse con el problema y encontrarle solución sin tener que romperse la cabeza.

Nosotros lo hemos arreglado quitando el borde en la capa contenedor y creando una nueva capa, en la que situaremos el contenedor. Esa nueva capa la hemos llamado borde y es la que va a tener el estilo de borde definido.

<div id=”borde”>
<div id=”contenedor”>
…. contenido de toda la página
</div>
</div>

Para conseguir el borde se han definido el siguiente estilo para la capa borde.

#borde{
border: 2px solid #cccccc;
text-align: left;
width: 700px;
margin: auto;
}

Primero hemos definido un borde de 2 pixel. Luego un centrado a la izquierda (para contrarrestar el centrado al centro que tiene el body y que habíamos puesto para que Explorer centrase la capa del contenido. También se incluye una anchura de 700 pixel y un margen “auto” para que Mozilla y otros navegadores centren la capa.

El resultado final del ejercicio se puede ver en una página aparte. Por supuesto, conviene ver el resultado final utilizando varios navegadores distintos.

Conclusión

Hemos visto cómo maquetar una página utilizando CSS paso a paso. Esperamos que hayáis podido seguir el ejercicio y que ninguna dificultad os haya frenado. Realmente el trabajo con CSS para la maquetación es una tarea fácil, pero también es muy sencillo encontrarnos con escollos o problemas misteriosos que no parecen tener respuesta.

Sin ser un diseño complicado, realizar esta maquetación nos ha llevado varias horas de trabajo y algún que otro padecimiento, que por suerte no ha llegado a desesperación. Sobretodo existen dificultades a la hora de conseguir el diseño que se vea correctamente en todos los navegadores del mercado. Este diseño lo hemos probado con éxito en Mozilla, Firefox, Netscape, Opera y Explorer.

Para que la compatibilidad entre navegadores no signifique un problema muy pesado, nuestro consejo y el de otros desarrolladores, es diseñar con Mozilla o navegadores similares. Luego se puede ver el resultado en Explorer y adaptar lo que fuera necesario para terminar de cuadrar el diseño. En este caso habrán pocas cosas que cambiar, mientras que si diseñamos para Explorer y luego vemos el resultado en otros navegadores, seguramente nos tiremos de los pelos porque nada esté en su sitio.

La experiencia en el trabajo con CSS, nos dice que a menudo surgen los mismos problemas o similares. Una vez que ya los hemos resuelto unas pocas veces y nos hemos acostumbrado a ello, igual que hicimos con los detalles relativos al HTML y la maquetación con tablas, CSS se torna mucho más sencillo, potente y rápido de desarrollar.

Resultado final del ejercicio.

Pautas para alimentarse mejor

Verduras

  • Comer diariamente ensalada.Que el aceite impregne y dé brillo pero que no forme laguna
  • Siempre algún plato principal de verdura

Postre

  • El postre habitual debe ser fruta
  • Evitar tomar productos elaborados con harinas y/o azucares refinados

Hidratos de carbono

  • Aumentar el consumo de hidratos de carbono de absorción lenta (cereales à mejor cereales integrales, legumbres)
  • Los HdC se transforman en glucosa. Los hay de dos tipos:
    • Absorción lenta: son transformados lentamente y transportados a las células por goteo. Son el arroz, pan , pasta , muesli , lentejas.
    • Absorción rápida: son transformados rápidamente y las células son desbordadas de glucosa , lo que hace que la almacene como reserva en forma de glucógeno. Son el azucar de mesa , golosinas , chocolate , dulces , etc.
      • La sensación de saciedad no dura tanto y se tiende a comer con + frecuencia.
      • Esto produce una subida repentina del ánimo para producir una baja subsequente

Grasas

  • Disminuir el consumo de grasas de origen animal.
  • Los aceites más saludables son los que poseen ácidos grados monoinsaturados.
  • Observación: el pan cuando tiene poca grasa se seca enseguida; sin embargo cuando una miga se mantiene jugosa (magdalenas , croisants, etc) es porque tiene grasa

Grasas de los pescados

  • Los pescados azules (salmón , atún, sardina , etc) son más difíciles de digerir.
  • La grasa de lo pescados ayuda a que no suba el nivel de colesterol

Digestibilidad

  • Son más fáciles de digerir las grasas de los lacteos y las de los aceites crudos
  • Las grasas de carnes y huevos (mejor batidos que cocidos) no son tan fáciles de digerir
  • La mayonesa es fácil en cantidades moderadas

Alimentos integrales

  • No son alimentos extravagantes o exóticos. Integrales son las frutas , las hortalizas , las legumbres , el pescado frito. “Integral se refiere a “completo , íntegro , entero , que no ha sufrido mutilación”. De momento a nadie se le ha ocurrido quitarle las cascarillas a las lentejas…
  • Las ventajas de los cereales integrales son  :
    • Poseen fibra
    • Poseen más del doble de Fe , Mg y vitB. Porque estos componentes están en el germén del grano, que desaparece cuando es refinado
    • Cuando el arroz no es acompañado de vitB  , no es aprovechado por el organismo y es almacenado en forma de grasa.
  • Hay que cree que los cereales integrales llevan sustancias tóxicas provenientes de insecticidas y tratamientos diversos que se aplican a los cultivos. Esto no es así en el caso de consumir alimentos ecológicos. Más caros pero es una manera de invertir en salud.

Lactosa

  • Es el azucar de la leche de vaca
  • Provoca problemas en el aparato digestivo
  • Los yogures y quesos, al estar fermentados, no provocan este tipo de problemas o sus efectos son menores.
    • Además favorecen el desarrollo de la flora intestinal que es parte del sistema defensivo.

Frutas

  • Mejor enteras que en zumo
  • Si la comida es equilibrada en alimentos y sabores es más difícil que apetezca un postre dulce.
  • Sin conocimiento no hay libertad, que la gente tenga capacidad de elegir

 

Comprar Camara Digital

¿Qué cámara digital debería comprarme? Seguro que te estás haciendo ahora mismo esa pregunta. ¡¡Menudo dilema!!. Te sientes un poco perdido porque, quizás, no sabes todo lo que te gustaría sobre fotografía digital. A lo mejor no sabes muy bien valorar en qué te deberías fijar para hacer una buena compra… ¿Es así? Pues no te preocupes: te vamos a echar una mano para que tu futura cámara digital no te defraude. Estate atento, que empezamos.

 

El Punto de Partida: ¿Para Qué la Vas a Usar?

Aunque te parezca mentira, una decisión acertada depende más de tener claro para qué la vas a usar que de conocer con pelos y señales las prestaciones de todas las cámaras del mercado. ¿Para qué quieres la cámara? ¿Qué tipos de fotos vas a hacer con ella? Mi amiga María me contaba su experiencia: “Me compré una Pentax K10D porque tenía dinero y entraba en mi presupuesto. Quería hacer fotos estupendas. Y ahora apenas la saco de casa porque abulta mucho y es un poco compleja de manejar. Suelo coger la Canon IXUS 75 de mi hermana, que para lo que la quiero va más que de sobra…”.

 

El Precio No Debería Ser el Factor que Determine Todo

Todos deberíamos aprender de la experiencia de María. A menudo, cuando queremos comprar algo que no conocemos muy bien, tendemos a pensar en cuánto estaríamos dispuestos a gastarnos y luego tratamos de comprar el mayor número de funcionalidades por ese precio. Es un error por varias razones:

Puede que haya funcionalidades que no vas a usar y podrías ahorrarte un dinerito, que a nadie nos sobra ;).

Puede que no tenga la funcionalidad clave que haga que no vayas a sacarle partido.

Puede que sea más compleja de lo que piensas y no vayas a tener paciencia para aprender a manejarla.

Puede que sea tan simple que no te dé el juego que esperabas.

Por tanto, insisto: medita un poco sobre para qué quieres la cámara y qué tipo de fotografía quieres realizar. Si tu presupuesto actual no te da, es preferible que esperes un poco ahorres y luego te la compres.

 

De Qué Tipos de Usos y Tipos de Cámaras Estamos Hablando

¿En qué debes fijarte para saber qué tipo de uso vas a hacer? A veces es difícil si se está un poco perdido ¿no?. No te preocupes: aquí tienes unas pistas.

Si lo fundamental es que ocupe lo menos posible, que la puedas llevar encima casi sin darte cuenta, lo tuyo son las Ultracompactas. Aquí tienes el listado de las cámaras ultracompactas más populares del momento. Ten en cuenta que con un menor tamaño, estarás renunciando muchas veces a capacidad de control, con lo que este tipo de cámaras te servirán fundamentalmente para tomar fotos en modo automático y una serie de modos predefinidos: paisaje, retrato, nocturno, etc.

Si estás empezando y te gustaría aprender fotografía uno de los factores clave es que tu cámara te permita control manual sobre la velocidad de obturación y la apertura. Si son tus primeros pasos tal vez sea conveniente que pases por una Compacta: te ahorrarás unos euros y, si la afición a la fotografía se consolida, podrás dar el salto a algo más serio como una réflex. Tenemos aquí la colección de Compactas más populares del mercado: echa un vistazo.

Para todos aquellos a los que les guste la fotografía y quieran empezar a jugar con ópticas de mayor calidad y mayor número de aumentos tenemos el segmento de las Tipo Réflex. Para comprarte una deberás rascarte un poquito más el bolsillo. Algún tiempo atrás era la manera más barata de acercarse a las prestaciones de una réflex. Hoy en día, los precios de las réflex han bajado tanto que la diferencia es mucho menor. Si quieres echar un vistazo a las Tipo Réflex más vendidas del momento, pásate por aquí.

Ya Tengo Claro el Tipo de Marca… ¿Qué Pasa con el Resto de Características?

No hay más que mirar a la lista de características técnicas de una cámara digital para sentirse abrumado. ¡Tantos factores que considerar…!. No te apures: te vamos a contar cuáles son los más importante a tener en cuenta. Toma nota:

El Tamaño Sí Importa

Es un factor clave, y varía de fotógrafo a fotógrafo. La mejor cámara digital es la que no te cuesta llevar encima. A menudo hay grandes equipos fotográficos (y voluminosos también) que se quedan en el armario porque a su dueño le da pereza sacarlo. Otras veces, el fotógrafo no se siente cómodo con una cámara por no tener el cuerpo y el peso suficientes. La decisión acerca del tamaño requiere de un ejercicio de auto-análisis.

Los Famosos Megapixels

Suele ser un factor que la gente tiene muy en cuenta. Para los que no conocen el mundo de la fotografía digital, se asocian más megapixels a mayor calidad, lo cual es rotundamente falso. En el mercado existen muchas cámaras de 5 megapixels que toman mejores fotos que otras de 7 megapixels. No conviene obsesionarse con la resolución. Piensa además que la relación entre resoluciones no es lineal. Además, hoy en día la resolución típica de las cámaras digitales del mercado suele ser más que suficiente para la mayoría de los casos. ¿Sabías que para revelar una foto digital de 10x15cm en calidad estándar sólo se requieren 2 megapixels?

En general, un buen consejo es: desconfía de modelos de cámaras de fabricantes desconocidos que te venden montones de megapixels por precios irrisoriosNormalmente los megapixels no son reales, sino interpolados y las aberraciones cromáticas en las imágenes suelen ser muy desagradables. Fíjate en el precio de un tipo de cámara en los principales fabricantes del mercado y piensa que en una franja de un más/menos 15% está el precio de mercado para ese tipo de cámaras.

La Óptica: Mejor Calidad que Cantidad

Más importante incluso que el número de aumentos es la calidad de la óptica. Los principales fabricantes del mercado suelen tener ópticas muy cuidadas. Si te sales de ellos (Canon, Nikon, Olympus, Sony, etc), trata de informarte de quién es el fabricante de la óptica y qué calidad tiene. Si te interesa la telefotografía y vas a comprarte una cámara con muchos aumentos, seguramente te interesará que tenga estabilizador óptico de la imagen, para evitar fotos movidas cuando tenga el zoom a tope. ¡Ah! ¡Por cierto! Borra de tu diccionario las palabras zoom digital. Aquí hablamos de óptica. El zoom digital no debería ser nunca un factor a tener en cuenta.

Para los que Quieren Experimentar en Retoque

Este es un consejo para los de la categoría Tipo Réflex o Réflex. También para los de compactas de muy alta gama. Si te gusta la fotografía y el retoque; si eres un amante de Photoshop; si quieres realmente profundizar en esta bella afición, búscate una cámara que permita almacenar las fotos en modo RAW. ¿Quieres saber por qué?.

¿Pilas o Baterías?

Otro factor a tener en cuenta es el tipo de pilas o baterías que usa la cámara digital. Más importante aún si cabe es la autonomía que tenga la cámara. A este respecto, hay dos grandes tipos de baterías:

Baterías propietarias Generalmente ofrecen una mayor capacidad de almacenamiento de energia que las convencionales, y para una capacidad de carga semejante ocupan menor espacio que las pilas. Las mejores son las de ion-litio (Ion-Lithium).

Pilas convencionales Normalmente los las pilas de tipo AA de toda la vida. Se recomienda el uso de pilas recargables, por precio, porque dan una mayor autonomía que las alcalinas equivalentes, y porque es más ecológico. La gran ventaja de este tipo de pilas frente a las baterías propietarias es que en cualquier sitio que te quedes sin pilas puedes comprar un juego de alcalinas a bajo precio y seguir funcionando. Además las recargables suelen ser más baratas que las baterías propietarias

De decantarnos por una cámara con batería propietaria, procuraría que el cargador de la batería fuese una cartuchera externa, y que la carga no tuviera que hacerse en la propia cámara (para preservarla). Por otro lado, reservaría una parte de mi presupuesto para comprar otra batería de reserva para cuando se agote la primera.

Controles manuales

Ya lo hemos hablado más arriba: si tienes planificado hacer tus pinitos en el mundo de la fotografía, es necesario que la cámara digital que elijas te permita el mayor nivel de control manual. Especialmente sobre la velocidad de obturación y la apertura.

Y, Por Último, No Calentarse Demasiado la Cabeza

En los tiempos que corren, te puedes comprar una excelente cámara digital por un precio por el que no merece la pena calentarse demasiado la cabeza. Así que, decídete. El tiempo es oro. Cuanto más tardes, más oportunidades perderás de capturar momentos únicos, recuerdos inolvidables con tu nueva cámara digital. Casi siempre, los modelos más vendidos son los mejores en términos de relación calidad precio. ¿Y cuáles son esos?…

Las Cámaras Digitales Más Vendidas del Momento

Top Reflex Top Compactas Top Ultracompactas

Pentax K-7

por sólo 1127€
Con codigo promocional’20PIX08ES’
(ahorra 20€ Sólo hasta 26/08/09)+info

Olympus E-620

por sólo 532€

Nikon D5000

por sólo 624€
Con codigo promocional’20PIX08ES’
(ahorra 20€ Sólo hasta 26/08/09)+info

Canon EOS 500D

por sólo 578€

Nikon D60

por sólo 416€

Pentax Optio W80

por sólo 291€
Con codigo promocional’09PIX08ES’
(ahorra 9€ Sólo hasta 26/08/09)+info

Olympus PEN E-P1

por sólo 819€
Con codigo promocional’20PIX08ES’
(ahorra 20€ Sólo hasta 26/08/09)+info

Fujifilm FinePix Z30

por sólo 106€

Panasonic Lumix DMC-FS7

por sólo 127€

Fujifilm FinePix Z33WP

por sólo 160€

Canon IXUS 100 IS

por sólo 178€

Panasonic Lumix DMC-FS6

por sólo 128€

Pentax Optio P70

por sólo 158€

Casio Exilim EX-Z77

por sólo 80€

Casio Exilim EX-S10

por sólo 162€

 

Henry Chinasky Snippets

–          … hablando del sexo

–          Ninguno de nosotros sabe bien cómo usar el sexo, qué hacer con él. Para la mayoría de la gente el sexo es sólo un juguete , algo que enciendes y lo echas a correr

–          ¿Qué hay del amor?

–          El amor está bien para aquellos que pueden soportar una sobrecarga psíquica. Es cómo tratar de llevar sobre tus espaldas un cubo lleno de basura a través de una enorme riada de orina.

–          …

–          [A Cecilia le gustaba la naturaleza, los atardeceres, etc]

–          Cogí mi botella y me fui al dormitorio. Me quité los calzones y me eché en la cama. Nada estaba en armonía. La gente sólo abrazaba a ciegas lo que se le pusiese por delante: comunismo, comida natural, zen, surfing, ballet, hipnotismo, terapia de grupo, orgías, paseos en bicicleta, hierbas, catolicismo, adelgazamiento, viajes, psicodelia, vegetarianismo, la india, pintar, escribir, esculpir, componer, conducir, yoga, copular, apostar, beber, andar por ahí, yogurt helado, Bethoven, Bach , Buda, Cristo, jugo de zanahorias, Suicidio, trajes hechos a mano, viajes en jet , Nueva York y de repente todo ello se evaporaba y perdía. La gente tenía que encontrar cosas que hacer mientras esperaba la muerte. Supongo que estaba bien poder elegir…

–          ….

–          El sexo había estado bien, nos habíamos reído. Difícilmente podía recordar una temporada más cabal, ninguno de los dos exigía nada y sin embargo había un calor tierno, no había sido algo falto de entendimiento, no había sido carne muerta acoplada con carne muerta. Detestaba ese tipo de relaciones, el tipo de relaciones sexuales de Los Angeles, Hollywood, Belair, Malibu, Laguna Beach. Extraños al conocerse, extraños al despedirse. Un gimnasio de cuerpos innominados masturbándose mutuamente.Lagente amoral suele considerarse más libre, pero a menudo carecen de la capacidad de sentir o amar. Así que se hacían swingers(intercambio de pareja). Los muertos jodiendo con los muertos.No había juego ni humor en sus prácticas, era una cópula de cadáveres. La moral era restrictiva, pero estaba afianzada en la experiencia humana a través de los siglos. Algunas morales tendían a mantener a los hombres esclavizados en fábricas, iglesias y fieles al estado.Otras morales simplemente tenían buensentido.Era cómo una jardín lleno de frutas venenosas y frutas buenas. Tenías que saber cuál escoger y comer y cuál abandonar

–          …

–          La nochevieja era otra noche mala para mí

–          Las tracas se disparaban y los pijos y las bocinas sonaban y los borrachos aficionados vomitaban y los maridos ligaban con las mujeres de otros y sus mujeres ligaban con quien podían.Todo el mundo se besaba y se agarraba el culo en los baños y armarios, y a veces abiertamente, especialmente a medianoche, y había terribles broncas familiares al día siguiente.

–          …

–          Me acababa de desear “Feliz año nuevo” un idiota local de las noticias de televisión. Me disgustaba que me desease feliz año nuevo gente desconocida, ¿cómo sabía él quien era yo? Podía ser un hombre con un niño de cinco años colgado del techo y amordazado, contándolo lentamente en pedacitos

–          …

–          Las relaciones humanas nunca solían funcionar.Sólo las dos primeras semanas tenían  algo electrizante, luego los participantes perdían el interés. Las máscaras caían y las realidad aparecía: dementes, imbéciles, chiflados, rencorosos, sádicos, asesinos. La sociedad moderna había creado su propia especie y la había enfrentado entre sí. Era un duelo a muerte en un cerco sin salida. Lo más que podía esperar de una relación, decidí, eran dos años y medio como máximo. El rey Mongut de Siam tenía 9000 esposas y concubinas; el rey Salomón del antiguo testamento tenía 700 esposas; Augusto el fuerte de Sajonia tenía 365 mujeres, una para cada día del año. Sanidad en números