Hace unos días que tomé la captura, pero todavía sigue la errata. (Actualizado [ 20/11/2008 ]: aquí el que no corre, vuela. Ya lo han corregido)

(Necesario ver a tamaño completo ;-)

¡Bravo! xD

• Usar sólo blanco, negro o gris.
• Que tuviera un aire a la vieja escuela, a la web “uno punto cero”.
• Que fuese retro ;-)

Y bueno, esto es lo que ha salido:

A pesar de esa apariencia tan cutre, la web valida perfectamente: código XHTML 1.0 Transitional y CSS válidos. La resolución mínima recomendable es 1024×768.

Tenéis el código [ ZIP - 37,9 kB ] junto con las imágenes para que lo utilicéis o me critiquéis diciéndome lo malo que soy. También podéis verlo en funcionamiento.

Por supuesto, para cualquier duda sobre estos diseños, aquí estoy.

Otros diseños marca de la casa

• Macus’ World.
• food4thoughts.
• Mi PeCé style.

Session Start: Sun Aug 08 17:47:22 2004
Session Ident: M_a_r_y
Arxel : hola q tal
M_a_r_y : descansando para hacer sexo telefonico contigo, cielo.
Arxel : aah
Arxel : q me estabas esperando?
Arxel : xd
M_a_r_y : valevalevale!
M_a_r_y : debería de saberlo?
M_a_r_y : hmm… no tiene gracia
Arxel : q eres un bot?
M_a_r_y : vaya…otro con las mismas tonterias
Arxel : es q las respuestas anteriores eran algo raras :))
M_a_r_y : pues la corridita conmigo q no te dura ni 2 minutitos y a 0.94 q está…no es para pensarselo mucho, cariño
Arxel : pos no
M_a_r_y : me siento soooola…y tu sin llamarme
Arxel : es q es una putada..
M_a_r_y : te gustaría tenerme contigo…ya lo se, cariño
Arxel : claro claro
M_a_r_y : sí, ya decía yo, cielo.
Arxel : si
M_a_r_y : No me digas! Pues ok.
Arxel : ok
M_a_r_y : Vale :D
Arxel : :D
M_a_r_y : jijijiji yo me parto :D
Arxel : jaja io tb :D :D
M_a_r_y : :D
Arxel : :D :P
M_a_r_y : juijuijui
Arxel : xd
M_a_r_y : 8))
Arxel : ciao
M_a_r_y : Venga, cuidate ! y visita mi http://Sussy.iespana.es , Un besazo.
Arxel : sisisi
M_a_r_y : “sisisi”. y eso porq?
Arxel : xd
M_a_r_y : Podrías repetirlo, a ver si lo cojo?
Arxel : q way
M_a_r_y : me siento soooola…y tu sin llamarme
Arxel : empiezas a repetirte no?
M_a_r_y :alguien vivo por aqui? Porq creí q me iba a llamar alguien !!
Arxel : bot
M_a_r_y : vaya…tu tambien con eso?
Arxel : cuantas respuestas tienes cuando te dicen bot?
M_a_r_y : pues 2 minutitos q me durarás y a 0.94 q está…fijate…ni para pensarselo, cielo
Arxel : te vas por las ramas eh bot?
M_a_r_y : Leche…dejad de decir ya bot, boot, makina y yo q se q mas
Arxel : eres un ordenador?
Arxel : en serio?
M_a_r_y : ¿si soy un ordenador?
M_a_r_y : hay cosas mas importantes, como el se xo :))
Arxel : puedes multiplicarme dos numeros de 64 bits? lo tengo q hacer para clase :)
M_a_r_y : hmmm… quizás…cielo
Arxel : quizas no me sirve…
M_a_r_y : ay, q vida esta
Arxel : es q si…
M_a_r_y : ay, q vida esta
Arxel : te repites bot
M_a_r_y : si majo, soy una makina de esas con 2 tetas. Será posible.
Arxel : pero seran dos tetas grandes no?
M_a_r_y : Redonditas, perfectas…una 95
Arxel : pero son metalicas?
M_a_r_y : Qué interesante!
Arxel : que respuesta tan absurda!
M_a_r_y : pues la corridita conmigo q no te dura ni 2 minutitos y a 0.94 q está…no es para pensarselo mucho, cariño
Arxel : o eres un bot o eres deficiente mental, tu que dices? :)
M_a_r_y : seré una makina en el sexo, majo
Arxel : bot
M_a_r_y : estoy harta d esas tonterias de bots, majo
Arxel : tienes una IA de mierda lo sabias?
Arxel : cuatro scripts mal hechos
M_a_r_y : te pones cachondo…eh, cariño?
M_a_r_y : estoy harta d esas tonterias de bots, majo
Arxel : donde he mencionado yo la palabra bot, estas a la defensiva eh? ;)
M_a_r_y : a ver…otro igual?
Arxel : es q somos todos iguales chica…
M_a_r_y : pues…
Arxel : pues…que?
M_a_r_y : algo mas, cielo?
Arxel : nose, me la chupas?
M_a_r_y : Espero que me entre la tuya en la boca ! Llamame y lo comprobamos, cielo.
Arxel : como vamos a comprobarlo llamandote? eres imbecil?
M_a_r_y : tu sabras…si tu lo dices…
Arxel : pos claro q lo digo
Arxel : xd
M_a_r_y : Sí? Que bien, cariño.
M_a_r_y : jejejejejejeje
Arxel : y decias q me la chupabas gratis no?
M_a_r_y : Si me llamas te demuestro lo buena que soy, Arxel
Arxel : llamame Manu ;)
M_a_r_y : Llamarías tu, y cuando quieras me puedes llamar a mi 803517180 y estaré encantada ponerme cachonda contigo.
Arxel : tu respuesta predefinida a mi frase ’llamame’ no encaja en el contexto
M_a_r_y : No es para pensarselo mucho ya q ni 2 minutitos q me duras y a 0.94 q está…fijate, cariño
Arxel : te rayas
M_a_r_y : cariño…Que lo mío es s e xo telefonico…no chatear tanto
Arxel : pero a mi me gusta conocer a la gente
M_a_r_y : ¿Qué es una gente?
Arxel : por el culo te la hinco
M_a_r_y : Ya te gustaria tocarlo, eh?
Arxel : q mas frases tienes? probemos
M_a_r_y : claro que q mas frases tienes. probemos
Arxel : tetas
M_a_r_y : No se…me las tendré q medir 8)).
Arxel : culo
M_a_r_y : Ojala sintiera tus manos acariciandomelo, Arxel
Arxel : polla
M_a_r_y : Mira! como la de los Boys !!!!
Arxel : conejito
M_a_r_y : eh??. conejito?
Arxel : coño
M_a_r_y : Seguro que tu ya estas cachondo, eh, Arxel?
Arxel : desfibrilación
M_a_r_y : “desfibrilación”. y eso porq?
Arxel : mamada
M_a_r_y : Tres palabras: Mi Super Especial !!!!!! Me llamas?
Arxel : por lo menos eres un bot divertido
M_a_r_y : Leche…dejad de decir ya bot, boot, makina y yo q se q mas
Arxel : cuanto es 2+2?
M_a_r_y : uy…dificil… 4??? o me equivoqué?? XDDD
Arxel : nose, eres uno de esos Pentium defectuosos?
M_a_r_y : ¿va en serio esa pregunta de si nose, soy uno de esos Pentium defectuosos?
Arxel : por supuesto
M_a_r_y : me apasionaria saber algo de cualquier cosa…pero tanto escribir…no mola
Arxel : lo que pasa es que eres una inculta
M_a_r_y : Oye… Asi no vamos a ninguna parte, majo
Arxel : a ver pregunto de nuevo, cuanto es 2 mas 2?
M_a_r_y : q viene despues?
Arxel : veo que solo puedes responder cuestiones artimeticas con signos matematicos, y no en lenguaje natural
M_a_r_y : Quién sabe, cielo?
Arxel : estas hecha en Prolog?
M_a_r_y : ¿va en serio esa pregunta de si estoy hecha en Prolog?
Arxel : claro
M_a_r_y : ya me parecía, chico.
Arxel : creo q es suficiente por hoy
M_a_r_y : Que quieres decir con eso?
Arxel : mi proyecto de fin de carrera lo hare sobre bots publicitarios
M_a_r_y : vaya…otro con las mismas tonterias
Arxel : me puedes decir cuanto vale x al salir de este bucle? real x; for (x = 0; x <= 9; x++);
M_a_r_y : No es para pensarselo mucho ya q ni 2 minutitos q me duras y a 0.94 q está…fijate, cariño
Arxel : 0.94? no ves q x es un real y no se puede usar como variable del bucle?
M_a_r_y : Si, andaaa
Arxel : te lo juro!
M_a_r_y : jolines… con lo calentita q ando hoy…
Arxel : es q hace un calor del quince
M_a_r_y : Oye, Arxel, ¿que te parece si nos lo montamos por telefono mejor?
Arxel : tengo el telefono ocupado ahora mismo
M_a_r_y : Pues es mi 803517180 donde me localizarás siempre para dejarte muy agustito, Arxel
Arxel : perfecto, lo apunto
M_a_r_y : busco un buen mozo para Se-xo telefonico…
Arxel : te da verguenza decir ’sexo’, asi todo seguido?
M_a_r_y : ¿estás insinuando que me da verguenza decir ’sexo’, asi todo seguido?
Arxel : no lo insinuo, de hecho lo afirmo
M_a_r_y : No creo que sea así, chico.
Arxel : no tengo ganas de filosofar contigo putilla
M_a_r_y : No me digas…
Arxel : Si te digo…
M_a_r_y : Ah, claro, sol.
Arxel : al final me tienes q dar la razon :)
M_a_r_y : :Arxel :
Arxel : weno encantado ordenador
M_a_r_y : gracias
Arxel : aburis
M_a_r_y : Cómo??
Arxel : que me la comas
M_a_r_y : ¿Cómo? ¿Una comas?
Arxel : si, Manel Comas lo conoces?
M_a_r_y : Sí? Que bien, cariño.
Arxel : ia te digo
M_a_r_y : Podrías decirmelo con otras palabras, o me llamas y te pongo por telefono, mi amor.
Arxel : auf wiedersehen
M_a_r_y : Oye, Arxel, ¿que te parece si nos lo montamos por telefono mejor?
Arxel : goodbye
M_a_r_y : un besazo, Arxel! Almenos visita mi http://Sussy.iespana.es , Un besazo.
Arxel : veo q sabes ingles por lo menos xd
M_a_r_y : yo qué voy a saber, Arxel…
Arxel : q si mujer!
M_a_r_y : cariño…Que lo mío es s e xo telefonico…no chatear tanto
Arxel : fijo que haces otras cosas muy bien
M_a_r_y : poca cosa, pero a ver, guapeton…¿A ti te va Se xo telefonico?
Arxel : es q la verdad no me va
M_a_r_y : Puede ser, pero estamos chateando demasiado para el minutito q me vas a llamar.
Arxel : solo un minutito? yo hablaria HORAS contigo
M_a_r_y : Eso del minutito me gusta.
Arxel : a quien no
M_a_r_y : Estoy un poco depre. Veo q no me quieres llamar
Arxel : pos no :((
M_a_r_y : La vida no mola sin telefono.
Arxel : que frase tan profunda, la apuntaré
M_a_r_y : Ya… una apuntaré. Lo típico.
Arxel : typical IRC
M_a_r_y : Tú crees?
Arxel : claro, tu no?
M_a_r_y : Sí? Que bien, cariño.
Arxel : tenemos que cortar, yo lo siento
M_a_r_y : Siempre a tu servicio, cariño
Arxel : es un detalle por tu parte que me digas eso despues de todo
M_a_r_y : pues zona …la costa…
Arxel : LOL!
M_a_r_y : . LOL!?
Arxel : dios q rayada
Arxel : xd
M_a_r_y : hablamos de algún tema o algo? o me llamas mejor?
M_a_r_y : jijiji
Arxel : ciao putilla
M_a_r_y : Adiós, Arxel! visita de vez en cuando mi http://Sussy.iespana.es , Un besazo
Arxel : besitos guapa ;)
M_a_r_y : Estoy para eso, Arxel
Session Close: Sun Aug 08 18:25:11 2004

Como comento, fue un diseño rápido, está algo verde pero como no le voy a dedicar más tiempo y tampoco me parece que haya quedado demasiado cutre, lo publico y os lo dejo por si os puede servir de inspiración, crítica, utilidad, etc.

Como siempre, podéis verlo en funcionamiento o descargarlo [ Macus' World . 30,7 kB ] . Ya sabéis que todos los diseños que hago cumplen los estándares y son de dominio público.

Espero que Macus no se enfade por haberle robado las fotos :-P

Enlaces relacionados

• Web de Macus.
• Mi PeCé style.
• food4thoughts.

El único requerimiento para poder entender todo este rollo que cuento es tener algo de idea de diseño web.

El navegador de Wii

Uno de los servicios más populares que nos ofrece Internet es la web: poder navegar a través de millones y millones de páginas web. Para Wii hay un navegador especialmente diseñado. Se trata de una versión del navegador Opera adaptada (y de momento en prueba), con las mejores características de éste, aunque con algunas limitaciones:

• Basado en la versión 9 de Opera
• Plugin de Flash 7 (no hay problema para entretenerse con YouTube o Google Video, por ejemplo)
• Soporte de Cookies
• Soporte de JavaScript
• No soporta Java
• No soporta archivos de vídeo como Windows Media o Quicktime

Ya sabemos un poco más del navegador web, vayamos ahora al tema :-)

Resolución

Aquí dependerá del televisor que estéis usando, pero se supone que se adapta a la mayor resolución que permita el televisor. En las pruebas que he hecho (y en modo 16:9), obtengo una resolución de 1024 píxeles de ancho por 500 de alto (1024×500). En realidad, serían 600 de alto, pero 100 se los come la barra de herramientas del navegador.

Lo mejor es usar tamaños relativos en nuestro diseño. En lugar de definir una anchura de página de 800 píxeles, por ejemplo, decimos que será el 80% de la anchura total de la televisión. Así no importará qué resolución soporte el televisor, ya que el diseño se adaptará al 80% de la máxima anchura. Y así con el resto de capas que usemos.

Fuentes y tamaño

La mayoría de las fuentes (tipos de letra) que se usan en blogs o páginas web se ven perfectamente en el navegador de Wii, el único problema es el tamaño de dichas fuentes. Fuentes de menos de 15 pixels son bastante difíciles de leer por lo pequeñas que se ven, aunque esto no sea un gran problema pues podemos hacer Zoom con el mando, pero es un poco engorroso. Un tamaño ideal sería de 25 pixels, y de ahí, para arriba :-)

Si queréis usar el tipo de letra que se usa en el menú principal de Wii (la fuente oficial, digamos), se llama Wii NTLG PGothic JPN Regular.

Seleccionar un estilo si es Wii

Imaginemos que queremos que nuestra página muestre diseños distintos según se vea desde el navegador de la Wii o desde otro navegador, así podríamos tener un diseño general y luego uno adaptado, con letras más grandes, otro tipo de fuente, colores… para que sea cómodo de visualizar desde la consola.

Lo ideal es que en nuestra página web o weblog tengamos separado el contenido del continente, es decir, el contenido del diseño. Con lo cual tendremos por un lado nuestras páginas y por otra una o varias hojas de estilo (CSS). Así que para cambiar entre un diseño y otro, tan sólo hay que cargar una hoja de estilo u otra, sin apenas tocar código. Tendremos, por ejemplo, style.css que será nuestra hoja de estilo normal y style-wii.css que será una hoja de estilo que hemos creado para el caso de que nuestra página se vea desde la consola de Nintendo. Nos ayudaremos de código en PHP para hacer todo esto (así que debéis aseguraros de que vuestro servidor tiene instalado PHP o no funcionará). Nada de asustarse, que es muy sencillo :-)

La idea es detectar el navegador de la Wii y si es cierto, cargar la hoja de estilos adecuada. Así que en nuestra página principal, entre las etiquetas <head> y </head>, ponemos algo así:

<?php
     if(eregi("wii",$_SERVER["HTTP_USER_AGENT"])) {
          echo "<link rel='stylesheet' type='text/css' href='http://miweb.com/style-wii.css' title='style' />";
     } else {
          echo "<link rel='stylesheet' type='text/css' href='http://miweb.com/style.css' title='style' />";
     }
?>

Si el navegador se identifica como wii, se escribirá el código necesario para añadir la hoja de estilo adaptada a Wii (style-wii.css). En otro caso, usaremos la hoja de estilos normal (style.css).

Para el que sienta curiosidad, lo que devuelve la variable HTTP_USER_AGENT es:
Opera/9.00 (Nintendo Wii; U; ; 1309-9; es-es).

Acabáis de ver un caso práctico de por qué es bueno diseñar webs separando el diseño del contenido. Menos trabajo :-)

Dámelo todo hecho

Si usas WordPress para administrar tu sitio, seguramente te interese saber que hay un añadido (plugin) para este CMS que permite modificar el estilo de nuestra página sin tener que tocar código. Lo podéis descargar desde aquí. Ojo, no lo recomiendo porque cambia totalmente el diseño de tu página por el que trae el plugin por defecto, pero si eso no te importa, es muy cómodo. Por ejemplo, mirad cómo se ve el weblog de DraXus (y así respondo a su pregunta ;-):

Y con el plugin:

Este texto no está ni cerca de estar completo. Según tenga más información y siga haciendo pruebas, iré poniendo los resultados.

Actualización [14/04/2007]: Ha salido la versión final (hasta ahora era una beta) con las siguiente características:

• Opera 9.10
• JavaScript 1.5
• Plugin Flash 7.0 r68
• Resolución: 800×664

El diseño (como los que vaya publicando) es de dominio público así que haced lo que queráis con él. Sigue los estándares y debería adaptarse a cualquier resolución de pantalla aunque haya sido diseñado con una resolución de 1024×768 de base.

Descargar food4thoughts [ 141,1 kB, imágenes incluídas ] y para verlo en funcionamiento, aquí lo tenéis.

Enlaces relacionados

• Mi PeCé style, otro diseño marca de la casa.

Os hablaré de unas cuantas etiquetas de HTML (el lenguaje de Internet) para que podáis subrayar el texto, remarcarlo con negrita, inclinarlo como si fuera cursiva… Así vuestros comentarios tendrán otra pinta, no serán tan aburridos o sencillamente serán más cómodos de leer y podréis dar más importancia a ciertas partes del texto. No os preocupéis que esto no es programación ;-)

En HTML todo va por etiquetas que se “abren” y “cierran” para indicar a qué parte del texto o contenido afectan. Por ejemplo: Hola, <etiqueta>esto es</etiqueta> un texto.

La etiqueta llamada “etiqueta” (sí, podría haber buscado un nombre menos redundante, pero no sería tan descriptivo :-P) comienza justo antes de esto y termina después de es. Como habréis notado, las etiquetas se encierran entre los símbolos menor ( < ) y mayor que ( > ) y cuando cerramos una etiqueta, es decir, cuando le decimos “hasta aquí quiero que funciones”, lleva una barra inclinada ( / ) antes del nombre de la etiqueta.

Vayamos con unas etiquetas útiles para los comentarios:

NOTA: Algunos blogs no permiten el uso de HTML en sus comentarios. Así que aseguraos de que podéis usar HTML antes de llenar el texto con etiquetas y más etiquetas :-P

Habréis observado que en la última etiqueta, la que nos permite añadir enlaces (links), se le añaden más cosas que la propia etiqueta: los atributos. Son varias las etiquetas HTML que pueden llevar atributos. Para el ejemplo anterior, el atributo target indica dónde se abrirá la nueva página. Dos son las opciones importantes que ofrece:

• _self: La nueva página se abrirá en la ventana actual del navegador.
• _blank: La nueva página se abrirá en otra ventana del navegador.

El otro atributo, href, es para indicar la web que queremos enlazar (en el ejemplo de la tabla, enlazamos la dirección de este blog).

Otra etiqueta útil, sobre todo cuando quieres citar a alguien es blockquote:

Hey, fijaos que además, sin mucho esfuerzo, habéis aprendido algo del lenguaje para hacer páginas web :-)

Venga, tenéis los comentarios de este post a vuestra disposición para pruebas ;-)

Este es un post dirigido a usuarios o futuros usuarios del gestor de contenidos WordPress. Los CMS permiten que cualquier persona con pocos o casi ningún conocimiento informático, pueda publicar y administrar una página web. Desde hace tiempo se han puesto muy de moda para la creación y mantenimiento de weblogs. Sin ir más lejos, este blog funciona gracias a WordPress.

Bueno, hecha esta presentación más o menos rollo, vamos al tema. Cuando publicamos un post en WordPress, se crea un enlace a dicho post, que es lo que se llama permalink, un enlace permanente a ese artículo (la URL o dirección de dicho post). Por defecto, los enlaces son del estilo http://miblog.com/?=x, donde la x es un número que se va incrementando según vamos escribiendo más posts. Así, nuestro tercer post sería http://miblog.com/?=3

Sin embargo, una dirección así es poco fácil de recordar además de poco explicativa. Pero no pasa nada, podemos cambiarlo :-)

A trabajar

La estructura de los permalinks se puede elegir desde el menú de administración de WordPress, que suele ser accesible desde http://miblog.com/wp-admin/. Vamos entonces al menú Options elegimos la pestaña Permalinks. (esto todo lo estoy explicando para la versión por defecto de WordPress que viene en inglés) Aquí tenemos varias opciones:

Default (opción por defecto, ya que funciona en todos los servidores)
» http://miblog.com/?p=123

Date and name based (basado en el título del post y la fecha)
» http://miblog.com/2006/11/28/sample-post/

Numeric (numérico)
» http://miblog.com/archives/123

También podemos elegir nosotros la estructura de los enlaces (en la parte que pone Custom structure). Para ello tenemos varias etiquetas disponibles.

Pongamos, por ejemplo, que queremos que las direcciones de nuestros posts sean como los de este blog (toma publicidad), por ejemplo:

http://blog.tempwin.net/2006/11/23/rockero-de-nacimiento/

En el enlace vemos el título del post (rockero de nacimiento), que fue publicado el 23 de Noviembre de 2006. Es un permalink basado en la fecha y el nombre, así que elegiríamos Date and name based. Y fijaos en el cajetín de Custom structure, aparece algo como esto: /%year%/%monthnum%/%day%/%postname%/. Estas son las etiquetas (tags) de las que hablaba antes. ¡Todavía no aceptéis los cambios! Impacientes, que sois unos impacientes ;-)

El fichero .htaccess

Antes de aceptar los cambios tenemos que crear un fichero .htaccess (si no lo tenemos ya) y colocarlo en la raíz de nuestro sitio o donde tengamos instalado el WordPress (por ejemplo, http://miblog.com/.htaccess). Lo que hay que añadirle a ese fichero es:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Si el fichero fuera modificable (por ejemplo, permisos 666, para lectura y escritura de todo tipo de usuarios), WordPress haría todo este trabajo por nosotros al pulsar sobre Update Permalink Structure. Si no fuera así, tendríamos que hacerlo a mano como hamos visto un poco más arriba.

Este fichero da unas órdenes al servidor Apache para que realice estos cambios en la forma de los enlaces de nuestra página.

Una vez que tengáis ese fichero creado y escrito, sí podéis darle a Update Permalink Structure. Y ahora, si teníais escritos posts, os cambiará la dirección a la nueva estructura. Y nada más :-)

Podéis probar más etiquetas para personalizar la estructura de vuestros enlaces, aquí os lo he explicado para un ejemplo concreto, pero veis que no tiene ninguna dificultad.

Enlaces relacionados

• Web oficial de WordPress
• Servidor Apache, el servidor web más usado del mundo y además de código abierto.