Contenido

Aprende a programar juegos en Javascript

24 Ene

+ 10

Si estás pensando en hacer un juego en javascript, deberías echarle un vistazo a este tutorial de como crear uno desde 0. Además de conocimientos, armate de paciencia y conseguirás tu meta.

Resaltar el primer post de nuestro WordPress

24 Ene

+ 17

Hace unos días en el foro, GUAGUAU preguntaba como podíamos hacer que el primer post (el más reciente) quedara resaltado frente a los demás, como ya me lo han preguntado otras veces he pensado hacer un míni tutorial para tenerlo aqui guardado y accesible a todos. Quizas sería interesante que primero tuvieramos unas nociones básicas de como funciona un theme de WordPress.

El código

Para el ejemplo he usado el theme Kubrick, que es el theme por defecto que WordPress integra, está en la carpeta wp-content/themes/default/.

Primero hemos de encontrar el punto en el que insertar la marca que nos permita diferenciar un post del resto, para ello vamos a usar un sistema de dos lenguajes, PHP y CSS. Con PHP incorporaremos la funcionalidad necesaria para añadir una clase al post marcado y desde el CSS le daremos es aspecto que deseemos para diferenciarlo. Empezemos 😀

1) Encontrar el punto en el que se pinta el post.

Generalmente los themes de WordPress, disponen de un fichero index.php en el que se declara el Loop que se encarga de pintar los posts que componen a la petición realizada. Es aqui donde encontraremos la estructura de un post y donde meteremos mano al código para modificar el primer post.

<div class="post" id="post-<?php the_ID(); ?>">

Como podemos ver, la línea anterior nos dice que en este punto comienza el post, con id="post-X" (siendo X el ID de la noticia), y como class indicamos que se trata del típo post, que en nuestro CSS estará definido para otorgarle es aspecto que vemos en el blog. Ahora tenemos que conocer cual es el primero.

Para ello debemos encontrar el punto en el que se empiezan a repetir los posts.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Una vez encontrado el comienzo del Loop, empezamos a modificar nuestro código.

2) Añadir un contador de posts

Para añadir un contador, primero debemos definir una variable que, inicializada a 0, se incrementará con el paso de los posts.

<?php
   $contador = 0; 
	if ( have_posts() ) : while ( have_posts() ) : the_post();
	++$contador; //Incrementamos en 1 por cada post
?>

3) Controlamos el primer post

Disponiendo del contado únicamente tendremos que controla que cuando este sea 1, aplique la nueva class al contenedor del post.

<?php
	$contador = 0;
	if ( have_posts() ) : while ( have_posts() ) : the_post();
	$contador; //Incrementamos en 1 por cada post
	if ($contador == 1) $claseResaltado = " resaltado"; //Dejamos un espacio delante de la palabra
	
	<div class="post<?=$claseResaltado?>" id="post-<?php the_ID(); ?>">
?>

4) Versión más compacta

Una versión más compacta podría ser algo así.

<?php
	$contador = 0;
	if ( have_posts() ) : while ( have_posts() ) : the_post();
	
	<div class="post<?=((++$contador == 1)?" resaltado":"")?>" id="post-<?php the_ID(); ?>">
?>

5) Un poco de estilo

Ahora que ya tenemos marcado el post, únicamente tendremos que aplicarle el estilo necesario en nuestro style.css.

.resaltado {
	background-color:#D1E2EF;
	padding:1em;
	margin:1em 0;
	-moz-border-radius: .8em; //Solo Firefox
}

.resaltado h2 {
	margin:0;
}

6) Bonus: Formato CSS exclusivo

Cuando decidí hacer el post, pensé en usar un sistema en el que implicara una modificación en el theme por que debido a la variedad de themes y formatos es imposible crear una forma estandarizada para hacerlo, así que indicando el post que se ha resaltar con una clase desde PHP conseguimos aligerar el problema, además de asegurarnos compatibilidad con los navegadores.

Podríamos hacer uso de selectores CSS para conseguir un efecto similiar. Pese a que el selector :first-child no está soportado por Internet Explorer 6, una solución sin tener que editar el fichero .php sería esta.

Esta solución no es compatible con Internet Explorer 6.0.

#content .post:first-child {
	background-color:#D1E2EF;
	padding:1em;
	margin:1em 0;
	-moz-border-radius: .8em; //Solo Firefox
}

#content .post:first-child h2 {
	margin:0;
}

En el código anterior, aplicamos el estilo al primer hijo con class="post" que se haye dentro del elemento padre con id="content". Consiguiendo el mismo efecto que el descrito anteriormente en los navegadores más modernos.

7) Bonus: Versión sin contador

Alex me da una ida para una versión más compacta aún.

<?php
	$resaltado = ' resaltado';
	if ( have_posts() ) : while ( have_posts() ) : the_post();
	
	<div class="post<?=$resaltado;$resaltado = null;?>" id="post-<?php the_ID(); ?>">
?>

Otro CSS Hack para Safari

23 Ene

+ 4

Hace unos meses, Diego publicó un hack distinguir Safari frente al resto de navegadores en nuestros ficheros CSS. Pese a que no soy amante de los hacks ya que nos obliga a no respetar los estandares CSS para conseguir efectos que podrían ser pensados de otra forma, he de reconocer que no siempre tenemos la potestad o la posibilidad de evitarlo, y hemos de caer en sus garras.

Para distinguir Safari 3.0 y Opera 9,  de entre todos los demás navegadores en nuestros CSS, podemos recurrir al siguiente hack.

body { background-color: red; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    body { background-color: blue; }
}

Como podemos ver, el hack es muy fácil de implementar, además, nos permite tener bastante bien ordenado nuestro CSS.

@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* Reglas de Safari 3.0 y Opera 9  */
}

aNieto2k y Maestros del Web

23 Ene

+ 8

Desde que me inicié en el desarrollo web, Maestros del Web ha sido el punto de referencia en el que me he apoyado cuando he necesitado algo. Sin duda es la mayor comunidad de desarrolladores hispanos de Internet y cada día crece más y más. Por ese motivo me siento especialmente halagado de disponer de un pequeño apartado entre sus increíbles páginas sobre mi humilde persona. Quiero darle las gracias a Stephanie Falla por su paciencia y por el gran trabajo que ha hecho y está haciendo por los desarrolladores web.

Internet Explorer 8.0 modo super estandar

23 Ene

+ 22

Menuda se ha liado con la última publicación de IEBlog, en la que anuncian un tag <meta /> sacado de la manga para activar el modo «Super Estandar» en su navegador. 

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Se trata del sustituto del antíguo método para salir del modo Quirks, al que teníamos que jugar con el <!DOCTYPE /> de nuestra página. Si eliminabamos dicho tag, entrabamos en modo Quirks,  osea un modo más permisivo y menos estandar.

Al parecer los chicos de A List Apart, anunciaban la aparición del tag meta X-UA-Compatible, un tag que la gente de Microsoft ha desarrollado sin tener en cuenta al resto de navegadores. Como era de esperar la mecha a echado a arder casi instantáneamente, recordando tiempo del ActiveX() y el document.all, desarrolladores como John Resig, Anne van Kesteren, Gareth Rushgrove o Roc (de mozillazine) que han tachado la iniciativa de inútil y perjudical para el desarrollo web en general. Aunque aún es una propuesta la cosa promete y seguro que este tema va a dar mucho que hablar en los proximos meses.

Personalmente creo que deberíamos asumir que todas las páginas deben ser estandares y nada tener un interruptor para hacer las cosas más fáciles. Está claro que un cambio así podría ser demasiado drástico y hacer añicos la Internet que conocemos, pero lo que no podemos hacer es seguir dejando en manos de los desarrolladores la elección de tener un sitio flexible o estandar.

Javascript en el servidor con Jaxer

23 Ene

+ 12

Jaxer es lo nuevo de los creadores de Aptana, y se trata de un servidor ajax que nos permite ejecutar javascript en el servidor. Algo que ya lleva tiempo comentandose y que puede cambiar nuestra forma de programar.

Hasta ahora, el javascript era siempre en dirección Navegador -> Servidor -> Navergador, lo que hacía que el uso de Ajax se limitara a peticiones al server y este devolviera los datos en la respuesta. Ahora con herramientas como Jaxer, la interacción se modifica y permite hacer peticiones Servidor -> Navegador -> Servidor, con lo que las posibilidades, evidentemente, se multiplican.

jaxer.JPG

Jaxer, no es más que un framework que se encarga de leer nuestras páginas desde Apacher, Jetty, Resin,… y tratarlas antes de enviarlas al cliente. De esta forma, y mediante una ligera declaración, podemos definir el javascript que se ha de ejecutar en el cliente y cual en el servidor. Para procesar el contenido de los HTML usan una integración con Mozilla, aprovechando el potencial de Firefox3 en cuanto al analisis de HTML, CSS y Javascript.

La herramienta dispone de un sistema de control de errores en el javascript del servidor inyectando una especie de envoltorio en el código del servidor, proviniendo posibles errores y dejándonos respirar tranquilos.

Ejemplo de código

<script runat="server">
        document.getElementById("name").value = Jaxer.File.read("name.txt") || "A Long Entry";
        function saveToFile(value) {
                validate(value);
                Jaxer.File.write("name.txt", value);
                return new Date();
        }
</script>

A simple vista podemos ver ciertas diferencias con el javascript que nosotros conocemos. Entre las diferencias nos encontramos:

  • runat="server" o runat="both", informan a Jaxer de donde se ha de ejecutar el Javascript que se incluye en el tag.
  • Jaxer.File, se trata de uno de los métodos disponibles en el API de Jaxer que nos permite interactuar con ficheros de texto simples de nuestro servidor.

Más información

HTML 5 Working Draft publicado

22 Ene

+ 2

La gente de la W3C ha publicado el primer borrador de lo que será el HTML5. Una acercamiento más al nuevo estandar del que ya vimos las diferencias con el actual HTML4.

Internet Explorer 7 como actualización de crítica

22 Ene

+ 5

Hace casi 2 años comentabamos los planes de Microsoft al querer hacer que Internet Explorer fuera una actualización crítica y obligatoria para todos los PC’s del mundo. Incluso vimos el crecimiento de los usuarios de esta versión en la primera semana y hace poco el incremento del último año. Pero hoy leo que vuelve a ocurrir lo mismo. ¿Un deja-vú? ¿Una primera falsa alarma?

Actualización de seguridad para GreaseMonkey

22 Ene

+ 0

GreaseMonkey es la herramienta que más uso cada día y siempre sin darme cuenta, ya que es la que se encarga de dotar de funcionalidad extras a las aplicaciones web que más uso y todo sin tener que preocuparme.

greasemokey-update.png

Hoy avisan de una actualización de seguridad, y de una serie de mejoras en esta nueva versión. Sin duda una actualización necesaria para que nuestro monito esté ahi abajo, sonriente haciendonos la vida más fácil. 

Combos dependientes y el desarrollo web que hay hoy en día.

19 Ene

+ 18

Hace unos días tuve que acercarme, por motivos laborales, a otra empresa para solucionar, o dar solución, sobre un problema Javascript sobre una página que nos estaban haciendo. Al revisar el código que estaban haciendo descubrí el problema y me horrorizé al ver el planteamiento que habían elegido para llevar a cabo dicha tarea.

Pongamos en situación

Imaginemos que queremos hacer una aplicación en la que necesitamos disponer de una serie de combos dependientes, por ejemplo pais/destino. Imaginemos que queremos usar ajax para recargar el combo de destinos al seleccionar un pais. Imaginemos que no tenemos mucha idea y decidimos hacer uso de un setInterval() para controlar el momento en el que el combo cambie…

Veamos el código

var pais = document.getElementByID("pais");
vat tmpPais = "";

function actualizaDestinos() {
	// Ajax...
	 	....
}

function compruebaPais(){
	if (tmpPais != pais.value) actualizaDestinos();
	else tmpPais = pais.value;
}

setInterval("compruebaPais", 1000);

Como podemos ver, el planteamiento es el siguiente, una especie de comprobación redundante como esta:

- ¿Estás modificado?
- No
- ¿Estás modificado?
- Si
- Entonces, alla voy!!!

Evidentemente, este sistema no es el más correcto, ya que por una petición satisfactoria se han producido N insatisfactorias. Lo que se puede evitar con un simple cambio de concepto.

Un planteamiento más correcto

Al intentar explicarles, que el uso de Ajax, suele ir ligado a la interacción por parte del usuario creo que les hize comprender que estaban enfocando el problema erroneamente. ¿Por que preguntar cada segundo si algo se ha cambiado, cuando puedes hacer que te avisen cuando algo cambie?

Gracias a métodos como el de onchange, podemos hacer que sea el combo el que nos avise de que hemos realizado el cambio y en ese momento lanzar la petición y cargar el combo correspondiente en el momento adecuado.

Veamos el código

var pais = document.getElementByID("pais");
vat tmpPais = "";

function actualizaDestinos() {
	// Ajax...
	 	....
}

function compruebaPais(){
	if (tmpPais != pais.value) actualizaDestinos();
	else tmpPais = pais.value;
}

pais.addEventListener("change", compruebaPais, false);
//pais.onchange = compruebaPais; (machacando el evento)

Como podemos ver, la cosa cambia. La conversación entre los combos es muy diferente y casi nula. Esto es debido a que el planteamiento lógico, conociendo los métodos disponibles nos puede facilitar la tarea.

- Estoy esperando, ya me avisarás.
- ...
- He cambiado, haz lo que te de la gana :D
- Me pongo manos a la obra, gracias.
 

Evidentemente esta solución evita, además de peticiones constantes, una serie de problemas añadidos al interval, que si no es tratado debidamente, aúnque este cambie los combos de la forma correcta, seguriá lanzando la petición indefinidamente hasta que cambiemos de página.

Conclusión

Con este ejemplo, no quiero decir que sea incorrecto el primer método, por que lamentablemente todo esto funciona y los clientes inexpertos ven una aplicación que funciona y que cubre la idea que ellos tenían, por lo tanto mirando desde el punto de vista del cliente, nunca puede ser erroneo algo que cumple lo que ellos quieren. Solo intento explicar que es necesario formarnos y estar al tanto de novedades relacionadas con el lenguaje que usamos, para realizar una tarea más profesional.

Con respecto al ejemplo número 2, hay que decir que este sistema no es nada accesible y que un usuario sin javascript se dará la vuelta y no volverá a nuestra página, por eso debemos pensar en todo y planear la forma de atacar el problema con todas las herramientas de las que disponemos. Sinó fuera así aún estaríamos usando iframes para cargar porciones de páginas. ¿no creeis?