jorgerock.com

Como Felipe Lavín nos hace la interesante pregunta de ¿Cómo aprendiste (X)HTML?, me animo a responder, aparte del comentario que deje en su blog, ya que me gusta este tema, sobre todo porque opino que muchos de los que más saben de esto, no han aprendido en grandes escuelas, ni gracias a manuales, más bien se ha hecho todo en forma autodidacta.

Al menos en mi caso es así, no aprendí leyendo manuales, porque así no aprendo prácticamente nada, solo me dió por mirar el código de algunas webs y ver que hacía cada cosa, y así llegue a esto. Para el CSS lo mismo, creo que leí primeramente que era y después empecé a buscar ejemplos de como se usaba, es lo más practico. Lo principal que debes tener es la motivación a aprender, porque sino, no se aprende nada. Hay que empezar a tratar de hacer algo hasta que te resulte, muchas veces con poco conocimiento se pueden hacer grandes cosas e ir puliéndolas en el camino, y lo principal es nunca estar conformes con lo que sabemos, porque siempre se descubren nuevas cosas.

Debo declarar que para mi el PHP es un poco más díficil, no es cosa de ver el código de una web y ya está, porque no aparece con CTRL + U (para los de Firefox), allí hay que poner algo más de dedicación, por lo que reconozco que todavía no me manejo bien con este lenguaje, pero siempre estamos a tiempo para aprender.

En vista de que están de moda los tumblelogs y los fotoblogs no me quise quedar fuera de ellos ya que los encuentro más “útiles” (ni tanto xD) que twitter. En fin, luego de esto me di cuenta Wordpress sirve para casi todo lo que quieras.

• Apuntes
• Fotos

Para las fotos el theme es made in yo, en cambio para el tumblelog el theme es obra de Felipe Lavín, más algunas ligeras modificaciones mías que son la de cambiar los tags de UTW a el sistema taxonómico de Wordpress 2.3 y un cambio de como se ve la fecha, nada más sencillo.

Si quieres cambiar el sistema de tags de Typographic solo tienes que ir a esta linea del archivo the_post.php:

< dd class="tags">[< ?php the_category(', ')?>]< ?php if (function_exists(UTW_ShowTagsForCurrentPost)) { UTW_ShowTagsForCurrentPost("commalist") ?>

Y reemplazarla por esto:

< dd class="tags">[< ?php the_category(', ')?>]< ?php the_tags(' ', ', '); ?>
< /dl>

Siemplemente se cambia la función de UTW por el código para los tags de Wordpress.

Hace tieeeeeeeempo dije que tenía en preparación dos themes para Wordpress, el caso es que no hize muchos cambios en ellos desde esa vez :P. Pero, como me gusto bastante el que voy a lanzar, aquí lo tienen. No como yo quisiera, completo, porque necesita muchos cambios que se irán haciendo con el tiempo, o yo o algún alma caritativa que lo descargue, haga las modificaciones y avise por este post.

Se trata de BlueK2 (Dios mío, que soy original xD), una modificación al K2, pero no un style, ya que hay cambios a nivel completo del theme. Tiene las mismas funciones que el original y en la página del theme podrás ver como usarlo si te atreves :P.

Como siempre, licencia Creative Commons.

En fin, se necesita gente que lo pruebe y corrija y avise.

Descargar BlueK2 0.1 Alpha

Hace algún tiempo aNieto2K nos mostraba como hacer un simpático dock con CSS al estilo de los Mac. Ahora me encuentro vía Digg con esta otra versión del dock, que según yo esta más fácil y más simpático, además mucho más fácil de conseguir en simples pasos. La idea es de N.Design Studio, y se logra así:

1. Bajar los archivos necesarios para hacerlo y los ejemplos

Aquí.

2. Insertar esto

Entre las etiquetas head coloca esto:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

El primer código es para el Javascript. Obviamente el segundo es para el CSS, lo mejor es incluir lo que esta en el style.css del zip del principio en nuestro CSS principal. Y el tercero es para arreglar los problemillas con los png de IE6.

3. Configuración

Incluir esto dentro del tag body

<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

4. Agregar / Quitar items

Para agregar al dock superior:

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

Recuerda que las etiquetas span deben ir después de las img para este caso.

Para agregar al dock inferior:

<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>

Aquí las etiquetas span deben ir antes de las img.

¿Lindo, no? Me parece interesante el resultado, aunque no se como quedaría en una web, si mejoraría o empeoraría la accesibilidad. Pero igual es muy bueno. Para ver como queda puedes seguir este enlace.

Me acabo de dar el tiempo de validar este sitio porque como cambié el theme había que volver a hacerlo y dejar todo perfecto. Fue relativamente sencillo. Pero aquí viene lo entretenido: validé Newpanic! xDDD. Sí, como alguna vez lo dije, me animé a hacer lo imposible y más díficil, validar un sitio repleto de errores y problemas de código. Pero lo hize. Me demoré su resto pero al fin puedo decir de Newpanic:

This Page Is Valid XHTML 1.0 Transitional!

Great!

Otro theme más para la colección. también creador por la sociedad Pancho-Yo xD. El theme es algo más “dark”, osea oscuro, y por favor no confundir con algo Visual. Personalmente creo que salió bastante bien, a pesar de que es bastante diferente a la idea original. De todas formas no es que se haya perdido mucho.

Como especificaciones solo decir que el theme es de una columna, además de que todos los elementos del sidebar están en el footer y quedan bastante bien. Se vería bonito si en una de las columnas del footer colocaran imagenes de Flickr.

Para no ser menos, este también va con licencia Creative Commons de atribución y no de usarlo en forma comercial.

El theme ya está en la página junto a su otro amigo y además tiene página propia, ahora a descargar ;).

Descargar DeathBlow 1.0

Saco está actualización para corregir algunos “errores no forzados” a la hora de hacer el theme. Básicamente lo hago por algunas sugerencias que recibí en los comentarios y a través del chat.

A simple vista no hay mayores cambios, pense en cambiar las esquinas a redondas, pero llegue a la conclusión de que así se veía feo, simplemente eso. Por lo tanto eso queda fuera, no creo que se implemente en una versión futura, más que nada porque de momento no creo que haga nada más con el theme.

En la página del theme puedes ver la lista de cambios en el Changelog, para que veas que archivos cambiar y agregar.

No son grandes cambios, así que despreocupate.

Saludos.

Descargar Lost Symphony 1.1

Les presento Lost Symphony (el nombre lo puso Hexagram), mi primer theme para Wordpress desde cero.

La experiencia de hacer este theme fue genial, aprendí muchas cosas y consulté mucho a mis amigos que saben más que yo. La idea original para el diseño del blog fue de Hexagram, entonces fui yo y la plasme en un Theme para Wordpress.

Ahora vamos con algunas especificaciones para el theme. El theme actualemte soporta Sidebar Widgets y Gravatar. Así que es problable que tengas que hacer algunas modificaciones a tu instalación. Por si tienes problemas con los Sidebar Widgets puedes visitar este post de aNieto2k donde te explican muy bien como funcionan estos. Para algun problema con gravatar vista a ZeroZen que explica muy bien como funciona gravatar, es muy probable que el problema sea que no tienes instalado el plugin o no has subido el archivo gravatar-blank.jpg a la carpeta wp-content.

En fin, eso es lo que tiene que ver con este theme. Esperemos alguien lo use xD. Puedes ver una captura.

El theme lleva una licencia Creative Commons, como se especifica más abajo.

Descargar Lost Symphony 1.0

Es la verdad. Hacer un theme para Wordpress no me costó absolutamente nada, claro, hay algo que hay que hacer antes, que me facilitó mucho la tarea. Empecé por maquetar como quería que fuera el theme en un página estática, solo en HTML y CSS. Así, el resto fue solo código.

Ahora, luego de hacer el theme y verlo en Firefox, me dí cuenta de que se veía realmente bien, pero el revisarlo en IE me empezaron los dolores de cabeza, se veía asquerosamente mal. Me dí cuenta de que hacer que se vea bien en IE es el verdadero trabajo.

Me puse a pensar en donde podía estar el error en el theme para que se viera así. Y hoy Tomás Pollak dejó un link en su blog para ver la visualización de cualquier web en el navegador de Mac OS X, Safari. Y allí me iluminé, el problema estaba en el sidebar, y me parece que el problema es de las lista. Así que ha modificar (¡que lata!).

Me demoré un poco en dejar la página a punto, pero ahora puedo decir que mi web válida el XHTML 1.0, así que más chocho no puedo estar. Igual la página sigue viéndose mal en Internet Explorer 6, aún no la veo en el IE7, pero más ratito lo hago y les digo que tal se ve. De todas formas me da igual si se ve bien allí o no, porque creo que la gente se debería dar cuenta de que es un asco, pero bueno.

Hoy día estoy con todo. ¿Será porque ya no tengo responsabilidades estudiantiles?

Edit: Revise en IE7 y es lo mismo, pero me parece que algo de aplicación al CSS tiene de mejora. Por cierto, mañana quiero validar el CSS, y luego vamos con el feed. Quizás con el tiempo haga lo mismo en Newpanic!.