Tag archive for día serio

[Día Serio] Conclusión

La conclusión está clara:

Podríamos escribir todos los días post aburridos como los que habéis visto hoy, pero no nos sale de los cojones. Para que luego digan que los blogs de humor no son necesarios.

[Día Serio] Cómo crear una ilustración paso a paso

Te recordamos que hoy nos ha dado por ahí y éste es el día serio de flapa

Os voy a explicar como hacer una Ilustración de una manera muy sencilla en Photoshop. Por supuesto hay muchas maneras de hacer una Ilustración pero como soy una persona autodidacta, utilizo un método muy sencillo y básico pero que llega a dar muy buenos resultados.

Por supuesto, esto no es un Paso a Paso exhaustivo, pero os dará una idea y veréis lo fácil que es hacer un dibujito por éste magnífico programa.

Paso 1 y 2

Paso 3 y 4

Paso 5

Final

Pues eso es todo… Espero que sirva de guía para los que se inicien en Photoshop y que haya resultado interesante para tod@s los que no lo conocieran.

Podéis ver más cosas así en: Josemon Inside

[Día Serio] Crear un menú horizontal en WordPress utilizando sólo CSS

Te recordamos que hoy nos ha dado por ahí y éste es el día serio de flapa

El código utilizado, en el siguiente artículo sólo es válido para WordPress 2.7.0 o superior, salvo el CSS

Hasta el momento los desarrolladores en WordPress teníamos ligeros problemas para mostrar el menú de navegación de nuestros blogs. Con la llegada de WordPress 2.7 (y superiores) también llegaron varias funciones que nos facilitaban la vida, en la medida de lo posible. Una de ellas es wp_page_menu.

¿Para qué sirve wp_page_menu?

Básicamente muestra un listado de páginas a modo de enlaces y además, y he aquí lo novedoso, nos da la oportunidad de incluir una opción de “Inicio” para acceder a la portada de nuestra página, algo que hasta ahora teníamos que realizarlo casi manualmente, en mi caso utilizando una función en function.php.

¿Cómo la utilizo?

La sintaxis es la siguiente:

<?php wp_page_menu( $args ); ?>

Los parámetros los podéis encontrar en el Codex de WordPress, donde además os ponen algunos ejemplos para que os vayáis familiarizando con esta reciente función.

¿Y tanto bombo para tanto?

No seas impaciente, que ya que estamos picando código, vamos a enseñarte cómo maquetar un menú horizontal de dos niveles de profundidad utilizando únicamente CSS, algo sencillo y para newbies (que nos vamos a poner serios en flapa, pero no tanto joder).

Lo primero es generar nuestro menú. Antes realmente habría que crear una estructura de páginas, de dos niveles de profundidad como máximo. En nuestro ejemplo las páginas serán: Portada, Seccion1 (subpagina1,subpagina2), Seccion3 (subpagina3,subpagina4).

Para generar el menú utilizaremos la función wp_page_menu que os mostramos antes. En nuestro caso, ordenaremos mediante el orden impuesto a la página. Además, pondremos el nombre “Portada” al enlace que lleve a la home de nuestro blog y le daremos la clase “horizontal-menu” a la estructura HTML generada:

<?php wp_page_menu( array( 'show_home' => 'Portada', 'sort_column' => 'menu_order', 'menu_class' => 'horizontal-menu' ) ); ?>

Esto generaría un menú parecido al siguiente:

<div class="horizontal-menu">
  <ul>
    <li class="current_page_item">
      <a href="http://urldetublog">Portada</a>
    </li>
    <li class="page_item page_item_1">
      <a href="http://urldetublog/seccion1">Seccion1</a>
      <ul>
        <li class="page_item page_item_2">
          <a href="http://urldetublog/seccion1/subpagina1">subpagina1</a>
        </li>
        <li class="page_item page_item_3">
          <a href="http://urldetublog/seccion2/subpagina2">subpagina2</a>
        </li>
      </ul>
    <li class="page_item page_item_4">
      <a href="http://urldetublog/seccion1">Seccion1</a>
      <ul>
        <li class="page_item page_item_5">
          <a href="http://urldetublog/seccion1/subpagina1">subpagina1</a>
        </li>
        <li class="page_item page_item_6">
          <a href="http://urldetublog/seccion2/subpagina2">subpagina2</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
Las clases del tipo page_item_#, el número que aparece es el ID de la página en cuestión y se genera de forma automática al crear la página. Los que hemos puesto son un ejemplo, no necesariamente deben ser los mismos que los tuyos.

Toma ya. ¿Ya hora qué?

Pues vamos a maquetar. Y aquí viene la bola extra y el por qué mola tanto wp_page_menu. Nos crea clases muy útiles en cada elemento li y que nos ayudan a maquetar. Por ejemplo, cada vez que hago click sobre un enlace, al li que lo contiene le pone la clase current_page_item. Si se trataba de una subpágina, al li de la página padre le aplica las clases current_page_antecesor y current_page_parent.

Ahora viene la magia:


.horizontal-menu ul li{
  display: inline;
  float: left;
  margin-left: 5px; /* cambiar este margen para aumentar la separación entre las opciones de 1er nivel */
  width: 200px; /* os recomiendo poner un ancho fijo, el motivo lo explico después */
}

/* para controlar el estilo de los enlaces de primer nivel */
.horizontal-menu ul li a{
  display:block;
  padding:10px 13px;
  text-decoration:none;
  cursor:pointer;
}

/* para controlar los li de segundo nivel */
.horizontal-menu li ul li{
  margin: 0;
  float: none;
  display: block;
  background-color: #CCC;
}

/* para controlar el estilo de los enlaces de segundo nivel */
.horizontal-menu li ul a{
  padding: 5px 10px 5px 10px;
}

.horizontal-menu li ul{
  display: none;
  position: absolute;
}

.horizontal-menu li:hover ul{
  display: block;
}

/* para controlar el color de las opciones sobre las que paso el ratón */
.horizontal-menu li:hover{
  background-color: #AAA;
}

/* para controlar el color de los li seleccionados, sobre los que paso el ratón,
los li padres y los li padres sobre los que paso el ratón */
.horizontal-menu .current_page_item,
.horizontal-menu .current_page_item:hover,
.horizontal-menu .current_page_parent,
.horizontal-menu .current_page_parent:hover{
  background-color: #FFBD25;
}

/* para controlar el color de los li de segundo nivel seleccionados */
.horizontal-menu .current_page_parent .current_page_item{
  background-color: #CCC;
}                    

/* para controlar el color de los li de segundo nivel seleccionados
sobre los que paso el ratón */
.horizontal-menu .current_page_parent .current_page_item:hover{
  background-color: #AAA;
}
Con este CSS podemos controlar todo el comportamiento de nuestro menú horizontal. Donde digo colores, podéis cambiarlos por imágenes y demás virguerías, para ponerlo bonito dentro de la medida de lo posible. Por cierto, no lo he testeado en Internet Explorer (ni ganas).

Pues hasta aquí todo por hoy y para siempre jamás. ¿A que mola? Pues ahora viene lo divertido: La verdad es que no mola nada. Es decir, para blogs con poca profundidad en su arquitectura de información esta opción no es para nada recomendable. ¿Por qué? Porque ocultar información no es una buena práctica desde el punto de vista de la experiencia de usuario. Obligamos a que el usuario tenga que situar el ratón sobre un elemento en cuestión para descubrir qué se oculta detrás, y se convierte en algo bastante tedioso.

Dejando que esto sea un blog de… a sí, humor, que ya se me había olvidado… pues espero que algunos os resulte útil. O no.

[Día Serio] Modern Warfare 2

Te recordamos que hoy nos ha dado por ahí y éste es el día serio de flapa

Hoy se pone a la venta Call of Duty: Modern Warfare 2 (aunque se puso a la venta de manera “no oficial” el Viernes 6 de Noviembre en algunos establecimientos). Éste es un juego que a mi personalmente me trae de cabeza.

Modern Warfare 2 es la continuación directa de Call of Duty 4: Modern Warfare, algo que no suele ocurrir en la franquicia de Infinity Wards (desarrolladora del juego). El juego está destinado a ser el mejor juego del año y no es para menos después de la acogida de su primera parte, aún hoy, es uno de los Shooters Online más jugados y eso que salió hace 2 años.

Como si de una gran superproducción de Hollywood se tratará, desde que se dió a conocer su salida nos han estado bombardeando con todo tipo de información y Trailers. La B.S.O. está compuesta por Hans Zimmer, autor de bandas sonoras como “Black Hawk Derribado” y “Gladiator“.

Alabado por la crítica y no carente de cierta polémica, ha salido (para PS3, Xbox360 y PC) al mercado en tres ediciones, siendo la más sorprendente, la llamada: “Edición Prestigio“, qie incluye como podéis ver, unas gafas de visión nocturna completamente operativas.

Modern Warfare 2: Edición Prestigio

Sobran las palabras… Os dejo con el último trailer que sacaron antes de su salida con la participación de Eminem y Nate Dogg en el tema que suena.

Si aún eres de los que creían que los videojuegos era cosa de niños, ten cuidado con lo que le compras a tus hijos.

Página oficial: Modern Warfare 2

[Día Serio] Sácale partido a las listas de twitter

Te recordamos que hoy nos ha dado por ahí y éste es el día serio de flapa

Durante las últimas semanas los que utilizamos la red social de twitter hemos visto cómo le han añadido nuevas mejoras, entre las que destaca la traducción al español – aunque más que una mejora era una necesidad, no exenta de polémica por otra parte – y las listas.

Una lista en twitter sirve para añadir perfiles que te resulten de interés pero sin que sus actualizaciones salgan en tu timeline, que es donde se encuentran tus followings habituales.

Un ejemplo práctico sería una revista digital que se limita a notificar sus actualizaciones a través de twitter, algo mal visto por algunos twitteros pero que no deja de ser de utilidad para muchos. Pero, ¿cómo podemos utilizar las listas de twitter para sacar el máximo rendimiento? Mucha gente ha empezado ya a agrupar followings habituales para que les sea más rápido leerlos. Es una opción totalmente válida y de hecho muy útil, pero os vamos a dar otro punto de vista.

Quizás lo más destacable de twitter sea la cantidad de información que genera en poco tiempo, información que podríamos decir, se encuentra dispersa en una nube a la que en ocasiones cuesta acceder. Así mismo, dar con personas que te resulten de interés es algo complicado al principio. No es de extrañar que el primer tweet de la inmensa mayoría sea: probando… ¿y esto cómo va?

Con las listas matamos dos pájaros de un tiro. Facilitamos a los recién llegados el encontrar gente afín y además les ofrecemos la posibilidad de leer información de relevancia, todo de una vez.

Pongamos el ejemplo de un twitter de música.

Ejemplo de listas de twitter: twitter de música nConcierto

Si el usuario de ese twitter lo utilizara para crear listas de blogs de música, artistas nacionales, internacionales, medios digitales (como es el caso), no sólo estaría ofreciendo su propio contenido a sus lectores, sino que además se convierte en un excelente punto de información, creando microplanetas de información continua y viva.

Si además añade como followings a esos usuarios, obtiene en su timeline una visión general y obtiene a través de las listas lo que conseguiríamos en un blog gracias a las categorías o las etiquetas, convirtiendo así su perfil en una herramienta muy potente para ganar followers a la par que da un valor añadido.