martes, enero 31, 2012

Tutorial de desarrollo web, Parte XVII: La etiqueta iFrame


Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS
Parte VI: Jerarquía en HTML. Herencia en CSS
Parte VII: Tablas (1). Bordes CSS (1)
Parte VIII: Tablas (2). Bordes CSS (2)
Parte IX: Identificadores y clases (1)
Parte X: Listas
Parte XI: Contenedores span y div. La instrucción display
Parte XII: Formato con HTML
Parte XIII: Formularios (1)
Parte XIV: Formularios (2)
Parte XV: Formularios (3)
Parte XVI: Formularios (4)

Bien, aquí estamos otra semana más con nuestro curso de HTML con un tema completamente nuevo, tras tanto tratar con formularios. Así que empezamos, como siempre, con la solución del último ejercicio en Google Docs, para luego comentar que esta semana vamos a ver la etiqueta <iframe>, pero, para ello, tendremos que repasar un poco conceptos de HTML ya obsoletos, el concepto de "frame".
En antiguas verisones de HTML existía una serie de etiquetas relacionadas con dicho concepto, pero a día de hoy, todas ellas (salvo el "iframe", que no funciona de la misma manera) se han eliminado. Los más veteranos en internet (o incluso aquellos no tan veteranos) recordarán páginas que preguntaban antes de entrar si queríamos entrar en la versión con frames de la página o no. En la versión "con frames" nos encontrábamos con que la ventana se dividía en varias páginas que parecían actuar individualmente. Y eso es porque lo hacían.
Para crear una página con frames en primer lugar debías crear cada una de las páginas individualmente como hemos hecho hasta ahora (usando algún atributo extra en algunos casos, pero por lo general, tal como hemos trabajado hasta el momento). Luego creabas una página en la cual lo único que se introduciría en el "body" serían las etiquetas relacionadas con "frames", de modo que dividías el cuerpo en tantas partes como el desarrollador quisiera (tanto horizontal como vertical) y le indicaría cuales de los documentos previamente creados debía aparecer en cada una de esas páginas (y algunos atributos más, que no vienen al caso ahora).
Durante la limpieza llevada a cabo en el HTML en sus últimas versiones, las etiquetas de "frames" han ido siendo eliminadas, aunque algunas versiones del HTML4 todavía lo permiten. Sin embargo, en HTML5 el "frame" como lo conocíamos los veteranos ha desaparecido, pero otra etiqueta ha tomado su lugar, "iframe", que juega con un concepto parecido al del "frame".
Gracias a la etiqueta "iframe", en vez de hacer una página compuesta por varias páginas, podemos introducir una página dentro de otra, en un hueco destinado para ello. Tomemos de ejemplo nuestra primera página, "hello_world.html". Vamos a crear una página nueva llamada "iframe.html" y vamos a introducir este código:

<!DOCTYPE html>
<html>
<head>
<title>Prueba con iframe</title>
</head>
<body>
<iframe src="./hello_world.html"></iframe>
</body>
</html>


Hacía tiempo que no introducía capturas de pantalla de los ejercicios, ¿eh?
Bueno, podemos ver como en esta nueva página hemos introducido mediante la etiqueta "iframe" la página que ya teníamos. El atributo "src" funciona del mismo modo que funcionaba en la etiqueta "img", usando una ruta (tanto relativa como absoluta) para indicar qué página usaremos. Como veis, no tiene ninguna complicación es algo muy pero que muy simple.
Pero, por supuesto, vamos a complicarlo un poco (no demasiado, no hay tanto para complicar aquí). Antes que nada, vamos a echar un vistazo a los distintos atributos que podemos usar en la etiqueta "iframe" aparte del "src":
  • height y width: Como sus nombres indican, son "altura" y "ancho" de  nuestro "iframe", expresado en píxeles. Sin mucho que explicar.
  • name: También, igual que hasta ahora, el nombre que le podemos poner al "iframe", aparte del "id". Como ocurría con los formularios, nos puede servir para programación, aunque no es su única utilidad. De hecho, un poco más adelante veremos esta otra utilidad del "name" del "iframe".
  • seamless: Este atributo, cuyo único valor posible es también "seamless" (de modo que se vería como seamless="seamless" borra los bordes del "iframe", haciendo que parezca que ambas páginas son una única página.
Para terminar con el artículo de hoy vamos a ver por qué nos será útil el atributo "name" del "iframe", además de aprender un nuevo atributo de la etiqueta "a". Este nuevo atributo es el atributo target y sirve para indicar dónde se abrirá el enlace que creemos. El atributo "target" puede tener distintos valores, según el cual funcionará de distinta manera:
  • target="_blank": uno de los más populares, abrirá el vínculo en una ventana de navegador nueva (o tal vez una pestaña nueva, dependiendo del navegador).
  • target="_self": Es el predeterminado, abre el enlace en la misma ventana (o "frame") en que se encuentre.
  • target="_parent": Aquí empieza a ser importante para los "iframes". Con esta instrucción, el enlace se abrirá en la ventana que contiene al "frame" en cuestión (sólo uno, si hay varios "iframes" unos conteniendo a otros, sólo el inmediatamente superior al que tenga el enlace será sustituido por la nueva página).
  • target="_top": Abre la página en la ventana actual, sin importar si estaba dentro de un "iframe", cogerá toda la ventana. Se diferencia del "_self" en que el "_self", si está dentro de un "iframe", la nueva página también se abrirá dentro del "iframe", y del "_parent" en que no importa cuantos "iframes" dentro de "iframes" haya, la página se abrirá siempre en la ventana completa.
Y ahora diréis "¿y para qué servía entonces el atributo name?". Tranquilos, justo vamos a eso. Los valores que he dado hasta ahora son los valores "prediseñados" para el "target", pero podemos darle valores propios. En concreto, podemos darle el valor que le hayamos dado al "name" de un "iframe". De este modo, si tenemos un "iframe" con name="pagina" podemos hacer un enlace con target="pagina". De esta manera, el enlace se abrirá dentro del "iframe" en cuestión.
Y, de momento, eso es todo por hoy. Sé que el artículo ha sido corto, pero no sólo estoy agobiado con trabajos de mi ciclo, sino que además no hay mucho más que hablar de los "iframes".

EJERCICIO

Crear una página con un "iframe" que a su vez contenga otro "iframe". El "iframe de la página superior debe ser bastante grande para que el otro se vea bien, mientras que el interior debe pasar "desapercibido" (o sea, que no se note que es un "iframe"). Finalmente, crear enlaces en todas las páginas para probar todos los posibles atributos.

Y aquí termina otra semana más el tutorial. Ya realmente nos queda bastante poco para terminar con HTML y un poco más para acabar con el CSS, pero yo creo que no lleguemos a verano sin haber empezado con JavaScript. Así que vayan preparándose. ¡Hasta la semana que viene!

lunes, enero 30, 2012

Desentrañando... Linterna Verde

El primer héroe en ser conocido como "Linterna Verde" en la Tierra fue el ingeniero Alan Scott, quien encontró una linterna de dicho color encendida con una llama que había caído a la Tierra miles de años atrás, y que una profecía decía que traería primero muerte, luego vida y finalmente, poder. Ya había cumplido las dos primeras partes, de modo que, para cumplir la tercera parte de su profecía, al encontrarse con el humano en cuestión, la llama le ordenó que fabricara un anillo con el metal de la linterna, con el cual puede invocar poderes increibles, sólo anulados por los objetos de madera.
Alan Scott se unió a la Sociedad de la Justicia de América y luchó contra el crimen durante muchos años, entre otra contra su archienemiga la Arlequín, que no era otra que su secretaria Molly Mayne que, en secreto, estaba enamorada del héroe, aunque acabó abandonando la vida criminal y su relación con Linterna para convertirse en una agente encubierta del FBI.
Pero lo que Alan Scott no podía imaginar era que su nombre de superhéroe no era para nada original, y que, desde hacía siglos, una policía intergaláctica conocida como los "Green Lantern Corps" se aseguraban, por orden de unos seres inmortales llamados los Guardianes del Universo, de que todo en cada punto de toda galaxia estuviera en orden. De hecho, la llama que Alan Scott había encontrado resultó ser parte del Corazón Estelar, una entidad en la que los Guardianes del Universo habían encerrado todas las energías místicas del universo, y probablemente esto fuera lo que inspiró al ingeniero a ponerse dicho nombre.
Años después de que Alan Scott se hubiera retirado fue la primera visita de un Linterna Verde a la Tierra, en concreto de Abin Sur, quien se encargaba del sector 2814, el sector en que se encuentra nuestro planeta. Pero la visita de Abin Sur no fue precisamente de placer, ya que ocurrió durante un enfrentamiento con el criminal galáctico Atrocitus, durante la cual Abin Sur fue gravemente herido y se estrelló en la Tierra, donde su anillo buscó un sustituto, y apareció en forma del piloto de pruebas Hal Jordan. Así, Hal Jordan descubrió de la existencia de los Guardianes del Universo y de las labores que un Linterna Verde debía cumplir, descubriendo que el anillo se alimentaba de la fuerza de voluntad del portador (la cual se representa con el color verde) y su única debilidad es el color amarillo, el del miedo, debido a una impureza en la batería con la que se recargan los anillos.
De este modo Hal Jordan se convirtió en el nuevo Linterna Verde del sector 2814, siendo adiestrado en un primer momento por Sinestro, otro Linterna más veterano, hasta que los Guardianes descubrieron de sus métodos tiránicos y los expulsaron del cuerpo al universo de antimateria, de donde Sinestro volvería para prometer venganza contra Hal Jordan y todo el cuerpo de Linternas Verdes. Entre los Linternas Verdes de otros sectores del universo se encuentran Kilowog, Boodikka o Tomar-Tu. Jordan a partir de entonces enfrentaría todo tipo de amenazas intergalácticas, entre ellas su propia jefa con quien mantenía un vínculo emocional, Carol Ferris, quien se convirtió en Estrella Zafiro, la reina de los Zamarons, quienes la manipularían para enfrentarse en múltiples ocasiones contra Jordan.
Una sorpresa llegó cuando se descubrió que el verdadero sustituto de Abin Sur no debería haber sido Hal Jordan, sino Guy Gardner, pero, por proximidad, el anillo acabó eligiendo a Jordan, quien también cumplía los requisitos. Al descubrir esto, Jordan contactó con Gardner, convirtiéndose en su compañero a partir de entonces, hasta el día en que sufrió un accidente y los Guardianes eligieron a otro humano para ser el compañero de Hal, John Stewart. De esta manera, tres humanos empezaron a actuar como Linternas Verdes en el mismo sector durante bastante tiempo, a veces alguno estando inactivo pero no por demasiado tiempo.
La desgracia llegaría cuando el Superman Ciborg destruyera Coast City, la ciudad de Hal Jordan, lo cual llevó a Hal a enfadarse, buscar venganza y comportarse de manera bastante mal vista para el cuerpo, por lo que los Guardianes del Universo lo llevaron a juicio. En su ira, Jordan se enfrentó a todo el cuerpo y absorbió el poder de la Bateria Central, tomando entonces el nombre de Parallax, la criatura de miedo que provocaba la impureza amarilla. De los restos del anillo de Hal se creó un nuevo anillo, que se entregó a Kyle Rayner, un nuevo candidato a Linterna Verde que demostraría ser el más poderoso de todos, y tras varios enfrentamientos con distintos superhéroes, Parallax (y, por lo tanto, también Hal) fue finalmente eliminado.
El cuerpo se reformó mientras el espíritu de Jordan tomaba el rol de el Espectro, el espíritu de la venganza y, con el tiempo, Hal volvería a la vida y volvería a ocupar su sitio en los Green Lantern Corps., poco antes de que la Crisis Infinita comenzara, tras lo cual se revelaría la existencia de otros cuerpos de Linternas, de los cuales hasta ahora sólo se conocían los amarillos (siendo Sinestro hasta el momento el único miembro, aunque a partir de entonces formaría los Sinestro Corps.) y los violetas (en la forma de Estrella Zafiro, potenciadas por el amor). La aparición de estos nuevos cuerpos de Linterna llevó a una serie de guerras entre ellos que todavía a día de hoy siguen teniendo consecuencias.

Lecturas recomendadas:
All-American Comics #16
Showcase #22
Green Lantern Vol.2 #59, #87
Green Lantern Vol.3 #48-50
Zero Hour: Crisis in Time
Green Lantern: Rebirth
Sinestro Corps War
Blackest Night

domingo, enero 29, 2012

The CubesPaper, Número XV (29/01/2012)

Otro domingo más, otro número más de The CubesPaper. Y como lo importante de estas entradas son las noticias, dejo ya de decir estupideces y empezamos con la chicha del asunto:

Se abre campamento inspirado en Hellboy
Podrán participar jóvenes de entre 9 a 17 años y estará en Portland, Oregon.
Más información: ComicsAlliance ComicVine

Popeye protagoniza un videoclip
El nuevo vídeo de la banda indie Wilco presenta a los personajes de la mitología del popular marinero.
Más información: ComicsAlliance

A la venta las colonias de los Vengadores
Seis colonias basadas en los personajes de la película producidas por JADS International.
Más información: ComicsAlliance

"Caballero Luna" cancelado
La serie llevada por Brian Michael Bendis y Alex Maleev verá su final en el número 12.
Más información: ZonaNegativa ComicVine

Nuevas series de Mark Millar
"Nemesis 2" y "Hit-Girl" serán las nuevas series que el pluriempleado autor prepara para los próximos meses.
Más información: ZonaNegativa


sábado, enero 28, 2012

¡The CubeBlog tiene logotipo!

Sí, señores. Aunque ya hace más de una semana que ocurrió, entre una y otra cosa no me había dado tiempo a anunciarlo, pero por fin este blog tiene un logotipo que no sea mi careto caricaturizado. Y todo cortesía de Tyler, el administrador del Tumblr Memes y Mamas, que lleva si no desde el inicio, desde casi desde el inicio en la lista de enlaces amigos. Así que aquí le doy su merecido homenaje y publicidad a dicho Tumblr (muy divertido sobre todo si sois fans de los memes de internet, de "El Club de la Lucha"... o simplemente de ver a chicas guapas).
Así que sin más dilación os muestro la nueva imagen de The CubeBlog (que próximamente incluiré en algún lugar visible de la página):
Bastante apropiado para nuestra temática, ¿no creéis?
Así que, agradecer una vez más a Tyler por su colaboración, invitarles a todos a pasearse por su blog... Y esta noche, ¡fiesta en honor a este nuevo banner!

viernes, enero 27, 2012

(Reseña de serie) Sherlock, 1º temporada

Sé que esta serie ya lleva dos temporadas, pero he decidido a partir de ahora en este blog hacer las críticas de las series temporada por temporada (aún así, la única serie con la que no lo he cumplido ha sido Smallville, la cual, a lo mejor, con el tiempo reseño también de este modo). De este modo, ya que he visto ya los tres episodios que conforman la primera temporada de esta serie, me dispongo a hacer la correspondiente crítica.
Basada en los famosos libros y relatos de Sir Arthur Conan Doyle, la serie británica Sherlock nos cuenta cómo unas versiones actuales de Sherlock Holmes y John Watson se conocen y comienzan su mítica asosiación, encontrando el médico completamente fascinante aunque también un tanto atemorizante a su nuevo compañero de piso, inventor de los términos "detective consultor" y "ciencia de la deducción". Sin embargo, pronto Holmes descubrirá que alguien tan brillante como él se encuentra en el lado contrario de la ley.
Sólo tengo una palabra para definir esta serie (al menos esta temporada): impresionante. La historia está muy bien hecha, los casos y las deducciones son estupendos y tiene un ritmo capaz de mantenerte atento durante la hora y media que dura cada episodio. Además, los personajes están muy bien definidos (sobre todo Sherlock Holmes y su síndrome de Asperger) y las actuaciones son fantásticas. También cabe señalar las escenas de deducción donde nos muestran el proceso mental del detective de una forma bastante curiosa.
Además, hay bastantes guiños a la obra de Conan Doyle, entre ellos el título del primer episodio, "Estudio en rosa" (una referencia a la primera novela del personaje, "Estudio en escarlata") o cada uno de los personajes de la serie, no faltando casi ninguno de los personajes clásicos (y los pocos que faltan, aparecen en la segunda temporada).
En conclusión, una gran serie que hará las delicias tanto de los fans del personaje como de aquellos que no tengan ni idea sobre él. Supongo que para la semana que viene reseñaré la segunda temporada, porque estoy deseando terminar el artículo para empezar a verla.

jueves, enero 26, 2012

(Reseña de película) Next Avengers: Heroes of Tomorrow

Después de haber sacado cuatro películas basadas en mayor o menor medida en algún cómic, la colaboración de Marvel con Lionsgate les llevó a sacar su primera película completamente original bajo el nombre de Next Avengers: Heroes of Tomorrow ("Próximos Vengadores: Héroes del Mañana") en el año 2008.
La película nos traslada a un futuro en el que los Vengadores han sido todos aniquilados por Ultron, y el en un principio único superviviente, Tony Stark (alias Iron Man), se encarga de criar a los hijos de sus compañeros caidos para algún día darle la revancha al robot. Sin embargo, el día en que los niños conocen a la Visión, el cual está encargándose de reunir información para Tony, la curiosidad y las travesuras de los niños provocan que su escondite sea descubierto por Ultron, por lo que la batalla final comienza mucho antes de lo esperado.
Aunque he leído muy malas críticas de esta película, al verla me ha sorprendido gratamente. No es que sea la mejor película Marvel que he visto, pero tiene una historia bastante curiosa e incluso interesante, el ritmo lo lleva bastante bien y encima tiene una serie de guiños bastante interesantes para los frikis (los más curiosos para mí relacionados con el hijo del Capitán América y la Viuda Negra, que lleva la ropa de Bucky, se llama James, igual que Bucky, y lleva un escudo holográfico como el que el propio Capi llevó durante una época). Tal vez el único problema esté en el clímax final, donde cierto personaje que no voy a desvelar por aquí se lleva la gran mayoría de la gloria, quitándosela casi por completo a los supuestos protagonistas (los niños). Eso sí, para lo que hay que prepararse es para encontrarse con una película que bien podría ser de los Jóvenes Vengadores o, en la editorial rival, los Jóvenes Titanes, al rondar la mayoría de los personajes la pubertad y comportarse de dicha manera.
La animación es bastante buena y sigue llevando el mismo rollo anime de las anteriores. Sin embargo, no está tan desarrollada como en la anterior película (la del Doctor Extraño) y no es por falta de posibilidades, pero no parece que hayan tenido ganas de trabajar demasiado los animadores. Además, los dibujos también tienen un estilo bastante "amerimanga" con lo cual la película posee muy poco detalle.
En general, una película, cuanto menos, curiosa, y que, si se ve con una mente abierta y no esperando encontrar fallos, puede entretener a cualquier fan de la editorial.

miércoles, enero 25, 2012

(Reseña de cómic) Evil Incarcerated: Osborn

Por algún motivo, los villanos siempre nos parecen personajes mucho más atractivos que los héroes, y eso es algo que las editoriales saben, y por eso de vez en cuando (cada vez más a menudo) nos presentan miniseries protagonizadas por estos villanos (sobre todo por aquellos más carismáticos). Un ejemplo de estas miniseries es la conocida como Evil Incarcerated: Osborn ("Mal Encarcelado: Osborn"), protagonizada por el eterno enemigo de Spiderman, Norman Osborn, mejor conocido como el Duende Verde, desde la época de Dark Reign ha ganado un papel bastante más importante en el universo Marvel, todo esto de mano de Kelly Sue DeConnick y Emma Ríos.
La historia nos cuenta cómo el empresario, prisionero en la Balsa de SHIELD, es trasladado a una instalación mucho más oculta, aún que aún no ha tenido juicio. Allí descubre que existe una especie de culto que lo adora y que pretenden liberarlo, al tiempo que conoce a cinco nuevos villanos con superpoderes y bastante pocos escrúpulos. Mientras tanto, la periodista del Bugle Norah Winters intenta seguir la pista del villano, consiguiendo llegar a dicha instalación.
La historia en sí no es mala, es incluso interesante, e incluso tocan temas políticos de una forma bastante más profunda que el cómic típico. El principal problema de la historia es que se hace muy confusa al incluir tantos personajes nuevos de los que sabemos poco o nada durante la mayoría del tiempo. Además, hay un reclamo bastante triste en el primer número, donde Peter Parker hace una corta aparición hablando con Norah para luego no volver siquiera a ser mencionado en el resto de la historia (ni siquiera se menciona a su alter ego, que considerando el odio que Osborn le tiene, es un tanto extraño). Por otro lado, se hace bastante ameno de leer si uno no intenta quedarse con todos los detalles y sólo pretende quedarse con la idea global.
El dibujo no ayuda mucho, lo empeora si cabe. Ríos parece intentar abarcar más de lo que puede, y si incluso los dibujos más simples son bastante feos, mejor no entremos a hablar de aquellos dibujos complejos, sobre todo de algunos de los nuevos personajes como el Decapitador o Xirdal. Aunque hay que reconocer que, salvo los casos de Norah Winters y June Covington (muy parecidas entre ellas), el resto de personajes son bastante diferenciables, lo cual es un punto a su favor.
Tal vez lo mejor que tenga la miniserie sea el minicapítulo que acompaña al primer número, titulado The Prime of Miss June Covington ("Los mejores años de la señorita June Covington"), donde nos cuentan el origen de este personaje de manos de Warren Ellis y Jamie McKelvie, ambos bastante acertados en sus puestos, y mostrando una cara del personaje bastante más aterradora que la que se ve en la serie principal.
En general, un cómic curioso, pero sin mucha más historia que eso. Realmente, salvo por la introducción del personaje de Covington, el resto no parece tener ningún tipo de repercusión en el universo Marvel, así que tampoco nos perdemos mucho por no leerlo. Y es que el Duende Verde sin Spiderman no es el Duende Verde.

martes, enero 24, 2012

Tutorial de desarrollo web, Parte XVI: Formularios (4)

Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS
Parte VI: Jerarquía en HTML. Herencia en CSS
Parte VII: Tablas (1). Bordes CSS (1)
Parte VIII: Tablas (2). Bordes CSS (2)
Parte IX: Identificadores y clases (1)
Parte X: Listas
Parte XI: Contenedores span y div. La instrucción display
Parte XII: Formato con HTML
Parte XIII: Formularios (1)
Parte XIV: Formularios (2)
Parte XV: Formularios (3)

Por fin llegamos a la última entrega de formularios en HTML, que ya empieza a ser cansino esto. Pero, antes de empezar, como todas las semanas, aquí está el documento de Google Docs con la solución del ejercicio de la última semana.
La última semana vimos los posibles atributos de la etiqueta "input", que, como ya hemos estudiado a lo largo de estas tres entregas, puede tomar múltiples formas dependiendo del valor de su etiqueta "type". Ahora nos vamos a encargar de ver los atributos de las otras etiquetas que pueden ir dentro de un formulario (aquellas que aprendimos en la segunda entrega).
En primer lugar, vamos a hablar de un atributo que ya vimos la semana pasada. El primero de ello es el atributo disabled="disabled" que, como recordaréis, hacía que el "input" al que se lo pusiéramos estuviera no operativo. Pues bien, este atributo también valdrá para las etiquetas <textarea>, <select> y <option>, que serán las tres etiquetas de las que hablaremos en este capítulo.
También hay que remarcar los atributos name e id, que ya hablamos la semana pasada que todos los "inputs" podían (y debían) tenerlo. En este caso, ocurre lo mismo, salvo por el hecho de que los "options" del "select" no pueden tener atributo "name" (ya que se supone que el "name" será para nombrar al "select" entero).
Ahora vamos a los atributos específicos de cada uno. En el caso del "textarea", realmente ya hemos visto todos sus atributos, pero estará bien recordarlos. En primer lugar, tenemos los atributos obligatorios cols y rows. Estos atributos indicarán, en número de caracteres, cuántas columnas y filas tendrá el "textarea" con el que estemos trabajando. Esto se verá más fácil con un ejemplo:

<textarea cols="5" rows="3">12345
2
3</textarea>


Como véis, el "textarea" se adapta según los valores que le demos a "cols" y a "rows". Es bastante simple.
El otro atributo que también pueden llevar los "textarea" es el atributo readonly="readonly" que también vimos en algunos "inputs" la semana pasada y que sirve para crear un "textarea" que, a pesar de que no parezca desabilitado (lo cual lograríamos con el atributo "disable"), no permita al usuario introducir texto.
Y ahora pasamos al "select". En el propio "select" vimos hace un par de semana el atributo "multiple", que permitía hacer un "select" en las que el usuario, mediante el botón Control, pudiera seleccionar varias opciones (y no sólo una como es por defecto). Si el lector no recuerda esa opción, le recomiendo volver al capítulo XIV del tutorial.
Como recordaréis, al usar el atributo "multiple", el aspecto del "select" cambiaba de ser una lista desplegable a mostrar directamente la lista en un cuadro de texto. Sin embargo, podemos también mostrar la lista en forma de cuadro de texto sin permitir una selección múltiple, y eso lo lograremos con el atributo size. Además, el "size", como su nombre indica, llevará de parámetro el número de filas que queremos que nos muestre (si el "select" tiene más opciones, nos pondrá una barra espaciadora) así que incluso aunque usemos el atributo "multiple", el "size" no puede servir para limitar cuántas opciones se verán a la vez. Mostremos un ejemplo:

<select name="selectcontamaño" id="selectcontamaño" size="4">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>



Podemos ver que, aunque tiene pinta de "select" múltiple, en este "select" sólo podemos seleccionar un único valor.
Finalmente, los "options" de "select" también pueden tener atributos, aparte de los ya mencionados "id" y "disabled". Uno de ellos es tan importante como el "name" para tratar con programación, y es el atributo value que ya vimos con los "inputs". Al igual que ocurría con los "inputs" de tipo "checkbox" y "radio", el "value" del "option" indica cual es el dato que se enviará con el formulario dependiendo de nuestra selección, así que si queremos tener un "select" operativo, necesitaremos que todos sus "options" tengan "value".
Y, finalmente, el atributo que nos falta es el atributo selected="selected". Este atributo funciona como el "checked" de los "radio" y "checkbox", indicando que ese "option" en particular estará marcado por defecto. Igual que ocurría con el "input" de tipo "radio", si ponemos varios "options" con este atributo, sólo el último aparecerá marcado, a menos que hayamos hecho un "select" de selección múltiple, en cuyo caso, igual que con los "checkboxs", todos los que tengan el atributo "selected" aparecerán marcados.

<select name="opcionesseleccionadas" id="opcionesseleccionadas">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>


De las otras tres etiquetas, <fieldset>, <legend> y <label>, sólo está última tiene un atributo especial, el atributo "for" que ya vimos en su día y que, por tanto, no volveré a explicar.
Y, si terminara aquí, el capítulo se haría un poco corto, así que voy a intentar explicar un poco el asunto de los "name", "id" y "value".
Lo normal cuando hagamos un formulario es que pretendemos que el usuario haga una selección, y que esa selección tenga algún efecto visible en la página que está visitando, tal vez cambiar algo de la página que está viendo, tal vez enviar un correo o un formulario de registro o de acceso a una página. Sea como sea el caso, cuando vayamos a programarlo, necesitaremos saber qué es lo que el usuario ha seleccionado.
Como ya he mencionado alguna vez, aparte del HTML y el CSS (lenguaje de marcado y hoja de estilo respectívamente), existen otros lenguajes que se usan en el desarrollo web, la mayoría de ellos de programación. Podemos destacar el JavaScript y el PHP, aunque existen otros como el ASP (que es sustituto del PHP). Estos son los lenguajes que, cuando construyamos un formulario, se encargarán de jugar con los datos que el usuario haya introducido, pero para ello hemos de facilitarle las cosas a los lenguajes mediante HTML.
De esta manera, identificar cada uno de los elementos de nuestra página mediante atributos "id" nos ayudará ya no sólo a dar estilos con CSS, sino también a trabajar con todos esos elementos a través de estos lenguajes. Aunque más importante que el "id" respecto a la programación será el "name", que es el atributo que indicará al lenguaje de programación el nombre de la etiqueta en cuestión y le permitirá acceder directamente a ella. No son sustitutos el uno del otro, habrá casos en que únicamente nos valga el atributo "name" (sobre todo en las etiquetas de formulario "form", "input", "textarea" y "select", son cuatro etiquetas que nunca deberían ir sin "name"), pero no todas las etiquetas HTML pueden llevar atributos "name", sin embargo, el "id" sí se puede aplicar a todas (o, por si las moscas, a casi todas, aunque ahora mismo no sé de ninguna que no pueda) las etiquetas.
Resumiendo: el "name" puede omitirse en casi cualquier caso, salvo en las cuatro etiquetas antes mencionadas, en cuyo caso es obligatorio para poder acceder a ellas desde lenguajes de programación, mientras que el "id" es un atributo que siempre es recomendable aunque nunca es estrictamente necesario.
El atributo "value" es todavía algo más de comprender sin saber de programación, pero básicamente en este atributo indicará qué valor toma cada etiqueta en cada caso. Tomemos el siguiente ejemplo:

<input type="submit" name="botonEnviar" value="Enviar"/>

Como vemos, este código crea un botón para enviar los datos. Aunque en el caso de los "inputs" botones, el "value" se convierte también en el texto en ser reflejado, realmente no es ese su cometido principal. Lo importante de este botón es saber que es el botón de nombre "botonEnviar" (debido a su "name") y que, en caso de ser pulsado, el valor que tendrá el "botonEnviar" será "Enviar".
Es importante darnos cuenta de que, para el navegador, el "name" y el "value" irán siempre juntos, de modo que los lenguajes de programación acudirán al "name" para preguntar por su "value", que aunque en el caso del botón no podamos cambiarlo (esto es un poco mentira, pero hasta que veamos PHP, mejor no entrar más en ese asunto), en el caso de los cuadros de texto o las listas de selección, sí que podemos cambiarlo, de modo que el "value" se modifica según lo que el usuario seleccione y modifique. Es por eso que los "radio" y "checkbox" que lleven una misma temática deben tener todos el mismo "name" pero distintos "value", para poder diferenciar. Para ilustrar esto:

<input type="radio" name="sexo" value="hombre" id="hombre"/><label for="hombre">Hombre</label><br/>
<input type="radio" name="sexo" value="mujer" id="mujer"/><label for="mujer">Mujer</label>


En este caso, si el lenguaje de programación pregunta por el valor de "sexo" (acudiendo a su "name"), recibirá el "value" del "radio" que esté marcado. De la misma manera funcionan los "textbox" y de una manera muy parecida los "select" (con la diferencia de que en el "select" sólo hay que introducir el "name" una única vez, ya que se presupone que todos los "options" que van en su interior tienen todos el mismo "name").
En fin, esta parte sé que es un poco confusa y abstracta, pero intentad quedaros con aquello básico de cómo debéis usar cada uno de los tres atributos. De todos modos, cuando lleguemos (si llegamos, que me da a mí que sí) a ver PHP, se volverá a hacer hincapié (y mucho) en estos conceptos y se entenderán de un modo más sencillo.

EJERCICIOS


Y terminamos con la página que veníamos haciendo estas tres semanas anteriores. Serán pocas modificaciones ya que no hemos hecho mucho práctico en esta entrada, pero bueno. Tendremos que cambiar la selección de país para que aparezcan cuatro opciones y que por defecto esté seleccionada España. Además, deberemos darle sus correctos "id", "name" y "value" a cada una de las etiquetas.

Y bien, aquí terminamos de momento con los formularios, así que la semana que viene pasaremos a otra cosa. Me gustaría haber podido daros la opción de enviar el formulario a una página que yo hubiera colgado en algún servidor para que pudiérais ver vuestros formularios en acción, pero desgraciadamente no tengo ningún servidor propio y hacerme una cuenta de hosting para esto únicamente hubiera sido excesivo, pero sigo pensando a ver si encuentro la manera de haceros probar vuestros formularios sin aprender aún PHP. Sea como sea, la semana que viene volvemos con más, que ya nos queda poco para terminar con el HTML y el CSS y empezar con el JavaScript.

lunes, enero 23, 2012

Desentrañando... Iron Man

El multimillonario Anthony Edward Stark (mejor conocido como "Tony" entre sus amigos) era el hijo del empresario Howard Stark y su mujer Maria. Siendo un niño prodigio con una impresionante habilidad para la tecnología, Tony heredó la empresa de su padre, Industrias Stark, a muy corta edad. Industrias Stark se dedicaba a desarrollar armas para el gobierno estadounidense, hasta el día en que, durante unos ensayos con algunas de sus armas en oriente medio, su convoy fue atacado por un grupo de terroristas pertenecientes al bando enemigo que querían obligar a Stark a fabricar armas para ellos.
Desgraciadamente, el ataque que los terroristas habían hecho, provocó que una cantidad considerable de metralla se alojara en el pecho de Tony, dejándolo al borde de la muerte. Sólo la intervención de Ho Yinsen, premio Nóbel de física y prisionero de los mismos terroristas, salvó a Tony al diseñar un aparato que, instalado en el pecho del ingeniero, evitaba que la metralla llegara hasta su corazón.
Tony y Yinsen colaboraron entonces para hacer la supuesta arma que los terroristas querían. Sin embargo, sabiendo que los matarían una vez hubieran terminado el proyecto, decidieron optar por construir un arma que ellos mismos usarían contra los terroristas, en forma de una armadura de hierro cargada de armas con la que Tony logró escapar, aunque Yinsen sacrificó su vida por salvar al joven empresario.
De vuelta en EE.UU., Tony decidió ocultar su doble identidad, diciendo que su alter ego, apodado Iron Man, era en realidad su guardaespaldas. Al mismo tiempo, descubrió que las heridas por la metralla eran muy graves y que debería vivir toda la vida con la placa magnética de Yinsen en el pecho, teniendo que recargarla diariamente.
De esta forma, Tony volvió a su rutina de empresario millonario mujeriego y juerguista compatibilizándola con su trabajo y con su nueva vida como el justiciero Iron Man que, por lo general, velaría por los intereses de Industrias Stark, aunque en ocasiones salvaría el día de forma completamente altruista. La Viuda Negra, la Dinamo Carmesí, el Hombre de Titanio o el Mandarín sólo son algunos ejemplos de los enemigos que el nuevo héroe tuvo que hacer frente, muchos de ellos intentando robar secretos de Industrias Stark, entre ellos, el de la propia armadura de Iron Man. De hecho, alguno de los rivales de Iron Man, como Obadiah Stane o Justin Hammer, se enfrentan a él en un campo completamente distinto, el campo empresarial.
A Tony lo suelen ayudar su secretaria, Virginia "Pepper" Potts, su chófer, Harold "Happy" Hogan, y un soldado americano al que salvó durante su huída de los terroristas, James "Rhodey" Rhodes. Además, Iron Man fue un miembro fundador del equipo de superhéroes los Vengadores, del cual fue líder hasta el descubrimiento del Capitán América congelado, momento en el que Tony decidió dejarle su puesto, sabiendo que el Capi estaba mucho más capacitado para ello. Gracias a su fortuna, Tony ha provisto al equipo de todo tipo de lujos, desde una mansión propia, un mayordomo (Jarvis) o incluso de tecnología (como el transporte más típico de los Vengadores, el Quinjet).
Con el tiempo, Tony consiguió un transplante de corazón lo cual le permitió vivir sin estar atado a su placa pectoral, aunque en esta nueva condición, pudiendo vivir una vida normal, Tony acabó por abusar del alcohol desarrollando una adicción. Finalmente, Tony acabó cediendo su traje a Rhodey hasta que lograra superar su alcoholismo, aunque, cuando Tony volvió, Rhodey, quien se había vuelto agresivo y paranoico debido a un malfuncionamiento del traje, acabó enfrentándose a Tony con una réplica del traje. Aún así, Tony diseñaría una armadura especialmente para Rhodey, con la cual este empezaría a actuar bajo el nombre Máquina de Guerra, el compañero de Iron Man.
Con el tiempo, Tony incluso reveló públicamente su identidad, lo cual unido a su madera de negociador, cuando el gobierno estuvo a punto de ilegalizar las actividades sobrehumanas, fue el que los convenció de crear el Acta de Registro Sobrehumano, por el cual todo aquel con poderes sobrehumanos que quisiera darles uso debía registrarse en el gobierno. Esta medida provocó un fuerte enfrentamiento entre héroes, "ganando" el bando de los que apoyaban en registro, que había sido liderado por Tony.

Lecturas recomendadas:
Tales of Suspense #39
 Iron Man #170, #225-231, #282
Iron Man: Extremis
Civil War

domingo, enero 22, 2012

The CubesPaper, Número XIV (22/01/2012)

Bien, otra semana más estamos aquí con las novedades más geek de la semana, aunque hay una noticia en particular que supera todas las demás, aún nos quedan algunas más.

El FBI cierra Megaupload
El cierre de la popular página de descargas se convierte en uno de las primeras víctimas de los ataques por parte de la industria del copyright.
Más información: ADSLZone El Mundo ComicBook Resources

Garth Ennis escribirá "The Shadow"
Ennis será el encargado de escribir la nueva serie del vigilante para Dynamite Entertaiment.
Más información: ComicsAlliance ComicVine Newsarama

Dynamite anuncia "Voltron: Year One"
La empresa de cómics anuncia una serie que revelará el origen de los personajes de la popular serie de animación de los 80's.
Más información: ComicVine Newsarama

IDW presenta nueva serie de Popeye
Roger Langridge será el responsable de escribir las aventuras del famoso marinero vegetariano.
Más información: ComicVine Newsarama

Rob Liefeld entra los Nuevos 52
El tan infame dibujante empezará a dibujar en unos meses varias colecciones de la nueva apuesta de Marvel.
Más información: ZonaNegativa

Anunciado el pinball de AC/DC
La empresa Stern Pinball, Inc. ha anunciado la disponibilidad de dicho juego.
Más información: Blabbermouth.net

George Lucas se despide de las superproducciones
El emblemático director decide centrarse en un tipo de películas distinto de aquellas que le dieron la fama.
Más información: ABC Antena3

sábado, enero 21, 2012

Trailer de Resident Evil: Retribution

La verdad, no sé cuánto tiempo hará desde que salió este trailer, pero es que la saga de películas de Resident Evil, después de la primera película (para mí, genial... aunque sé que no es la opinión de la mayoría), ha sido tan mala que pocas ganas me dan de seguirla. Sin embargo, aún no sé por qué, he seguido viendo las siguientes películas (a pesar de casi no recordar lo que ocurrió en la cuarta) y supongo que haré lo mismo con esta nueva entrega, que llegará a los cines el 14 de septiembre, pero tampoco espero demasiado. Pero aún así, aquí está el trailer:
La verdad, no entiendo el sentido de la escena introductoria del trailer, y el resto del trailer me sigue demostrando la poca relación que tiene la película con los juegos, con su ambiente post-apocalíptico sin solución aparente. Lo único que me parece curioso de esta película es el retorno de Jill y Carlos Olivera, además de la inclusión de personajes como Leon Kennedy, Ada Wong o Barry Burton. Pero aún así, sigue sin atraerme lo más mínimo, sobre todo considerando que a partir de que empezaron a incluir personajes del juego, las películas empezaron a apestar. En fin, habrá que esperar a septiembre para saber lo que han hecho, pero les aseguro que no es una de esas pelis que espere impaciente.

viernes, enero 20, 2012

(Reseña de película) Superman/Batman: Public Enemies

La sexta película en la línea de las Películas Animadas Originales del Universo DC es Superman/Batman: Public Enemies ("Superman/Batman: Enemigos Públicos"), publicada en septiembre de 2009, como todas las anteriores, directamente en vídeo, y adaptando el primer arco argumental de la colección Superman/Batman.
La película narra cómo Luthor es elegido presidente de EE.UU. y, durante sus primeros meses en la presidencia, parece que lleva un mandato ejemplar. Sin embargo, la cosa se complica cuando un enorme meteorito de kriptonita se aproxima a la Tierra, y Luthor aprovecha la situación para tenderle una trampa a Superman y convertirlo en un enemigo público. A partir de entonces, la cabeza de Superman tiene precio y el único que parece estar de su lado es su viejo compañero Batman.
La historia de la película es muy buena, pone una situación bastante curiosa y durante toda la pelicula la lleva bastante bien, respetando un ritmo también muy bueno. Además, mejora la historia del cómic original, que tiene demasiadas loebeadas (dícese de momentos y justificaciones estúpidas características de los cómics de Jeph Loeb... como es el caso). La propia excusa de Luthor para poner precio a la cabeza de Superman está mucho más desarrollada en esta versión, además de quitar momentos que pintaban bastante poco como la aparición del Superman del futuro. ¡Incluso el clímax final está muy mejorado en esta versión! Todavía hay algún resquicio Loeb por la película (¿Gorilla Grodd controlando a Mongul? ¿en serio?), pero, como digo, la mayoría han sido mejorado.
La animación sigue en la misma línea que las películas anteriores, aunque sin lucirse especialmente, como hicieron en Green Lantern: First Flight. Sin embargo, no es ningún paso atrás, simplemente no es tan necesaria como en la anterior película, y aún así la escena del clímax final tiene muchos efectos 3D (además de alguna de las peleas intermedias) bastante interesantes.
También señalar el hecho de que, tras Wonder Woman y Green Lantern: First Flight, ha estado bastante bien ver una película que nos meta ya en la acción casi desde el primer momento, asumiendo que, más o menos, conocemos a los personajes, porque, aunque soy partidario de que las películas sean bastante explícitas a la hora de presentar a sus personajes, en este tipo de películas (hechas especialmente para fanáticos) acaba cansando ver una y otra vez orígenes de personajes que ya conocemos (si a eso le sumáis que en medio también he visto The Invincible Iron Man y Doctor Strange: Sorcerer Supreme, entenderéis que esté cansado de ver orígenes de personajes). Pero bueno, es una apreciación al margen que no tiene que ver con la calidad de la película. Incluso podría ser un punto entre comillas negativo, ya que la película asume que conocemos más o menos a los personajes. Pero tampoco es algo tan malo, considerando la naturaleza de la película.
Concluyendo, una película que considero indispensable para cualquier fan de la editorial, que podrá ser visto tanto por los más eruditos en estos cómics como por los que conozcan sólo algunos de sus títulos.

jueves, enero 19, 2012

(Reseña de cómic) Jurassic Park: Dangerous Games

Desde que Steven Spielberg llevara a la gran pantalla la adaptación de la novela Jurassic Park de Michael Crichton en 1993, cantidad de material relacionado con esta salió a la venta, hasta el punto que el mismo Crichton escribió una secuela (The Lost World, en españa conocido como "El Mundo Perdido"), que también recibió una adaptación en forma de película. Entre otras cosas, se han publicado distintas series limitadas de cómics, algunas adaptando las películas, otras con historias originales. Y este último es el caso de Jurassic Park: Dangerous Games, el trabajo recién publicado de Erik Bear y Jorge Jimenez para IDW Publishing.
El cómic cuenta la historia del agente Daniel Espinoza, un agente encubierto de la CIA infiltrado en la banda del señor del crimen Cazares, el cual con los beneficios de sus actividades ilegales ha llegado a comprar la Isla Nublar, isla famosa por haber sido donde John Hammond construyó Jurassic Park años atrás, y en la cual todavía los dinosaurios viven a sus anchas. Cuando Cazares descubre la verdad sobre Espinoza, hace que lo lleven a su isla, donde le da una opción de sobrevivir: sus agentes lo soltarán en la isla y, tras veinticuatro horas en la que tendrá que sobrevivir de dinosaurios, su mejor hombre, "Tiburón", empezará a darle caza. Sin embargo, Espinoza encontrará en la isla unos aliados con los que Cazares nunca habría contado.
La verdad, a pesar de que el cómic es bastante entretenido y por lo general lleva buen ritmo, tiene un gran problema que tienen la mayoría de los cómics de Jurassic Park: está lleno de fantasmadas. De hecho, el concepto inicial me pareció muy bueno, pero desde el momento en que la doctora White aparece en acción lo hace todo completamente surrealista y hace perder bastante interés. Y las maneras que tienen los personajes de enfrentarse a los dinosaurios... vamos, pierde toda la tensión que caracteriza a la saga. Pero bueno, como digo, es lo que ocurre con todos estos cómics.
Respecto al dibujo, es bastante bueno. No sólo los dinosaurios sino también los seres humanos están bastante bien hechos y bien definidos. Además, el autor no se deja influenciar por las versiones de las películas de los dinosaurios e intenta asemejarlos a las suposiciones de los científicos, sobre todo los raptores, que aparecen completamente emplumados y sin llegar al metro medio de altura. Eso sí, el tiranosaurio sigue siendo excesivamente enorme (que no es que fuera pequeño, pero en esta saga siempre lo exageran).
En conclusión, un cómic que despierta bastante poco interés. Sin embargo, como fan de la saga, siempre sigo buscando algún material que sea capaz de regalarme las mismas sensaciones que cuando veo las películas. Pero no recomiendo este cómic a menos que no se tenga nada mejor que leer o que se sea  muy fanático de la saga.

miércoles, enero 18, 2012

Protesta contra la ley S.O.P.A.

Hasta la fecha he intentado abstenerme de hablar de política en esta nueva versión del blog, pero hay días como hoy en que es inevitable. Y es que todo el que se conecte hoy a internet se encontrará mínimo con alguno de los banners de "Stop censorship" que páginas como Google, Facebook o Wikipedia (quienes, de por sí, han "cerrado" la página durante el día de hoy) han colocado para protestar por la ley SOPA (Stop Online Piracy Act), la cual se suponía iba a ser votada la semana que viene en EE.UU. pero que, de momento, se ha aplazado indefinidamente.
Esta ley, similar a la infame "ley Sinde" española, criminaliza a los sitios webs que, bajo unos criterios establecidos por las industrias encargadas de gestionar los derechos de autor, faciliten de alguna manera el acceso a contenidos protegidos por copyright de manera gratuita, incluso penalizando a aquellas páginas que sólo enlacen a páginas que violen dicha norma, e incluso atacando directamente al usuario al proponer penas de hasta 5 años de prisión por cada 10 canciones descargadas (por poner un ejemplo).
Ya dejando fuera el tema de la legitimidad de la piratería y de cómo debería abordarse, esta ley afecta, como ya digo, a casi cualquier página de internet. Este mismo blog no sólo corre peligro de ser denunciada por enlazar a páginas que en cualquier momento pueden subir contenidos con copyright, sino que el sólo uso de los nombres y las imágenes que cuelgo de distintos cómics pueden suponerme un problema frente a esta ley.
Por eso, yo llamo a todo el mundo a manifestarse en contra de esta ley que, desgraciadamente, afecta a todo el mundo, y no sólo dentro de las fronteras del país que la propone, a hacerse eco de esta atrocidad contra la libertad de expresión, y a aquellos que tengan la posibilidad, que firmen en esta página en contra de la ley: Stop American Censorship (es una pena que, aunque la ley nos afecta a todos, no podamos ser todos los que votemos a quienes lo deciden).
Y, para cerrar este post, dejar a quien lleva décadas recordándonos que la SOPA es mala: Mafalda.
PD: Aunque este final me lo haya tomado con humor, no, esto no es ningún tipo de broma. La ley SOPA es muy real y su aprobación significaría el fin de internet tal y como lo conocemos.

martes, enero 17, 2012

Tutorial de desarrollo web, Parte XV: Formularios (3)

Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS
Parte VI: Jerarquía en HTML. Herencia en CSS
Parte VII: Tablas (1). Bordes CSS (1)
Parte VIII: Tablas (2). Bordes CSS (2)
Parte IX: Identificadores y clases (1)
Parte X: Listas
Parte XI: Contenedores span y div. La instrucción display
Parte XII: Formato con HTML
Parte XIII: Formularios (1)
Parte XIV: Formularios (2)

Décimoquinta entrega del tutorial de desarrollo web, seguimos otra semana más trabajando con formularios. Pero, por supuesto, antes de comenzar, nuestra resolución al último ejercicio en Google Docs, no volvamos a perder las costumbres.
En estas dos semanas hemos conocido los distintos controles que podemos usar para permitir al usuario introducir datos en un formulario. Esta semana vamos a empezar a trabajar con los distintos atributos que pueden contener las etiquetas de los formularios.
Como ya hemos hablado, algunos atribtos como "id", "class" y "name" se pueden usar en casi todas las etiquetas de HTML. En el caso de los formularios, las etiquetas "id" y "name" son bastante importantes, así que sería recomendable nunca dejarlas atrás. Si queremos, podemos darle el mismo valor tanto al "id" o al "name", pero que al menos todas las etiquetas tengan ambos atributos, para luego, mediante lenguajes de programación, poder acceder a sus valores. Mención especial merecen los checkbox y los radiobutton (los "inputs" de tipo "checkbox" y "radio"), los cuales, como ya hablamos la semana pasada, todos los que sean posibles respuestas a una misma pregunta deben tener el mismo "name", pero, como ocurre siempre, nunca dos etiquetas pueden tener el mismo "id". Para dar un ejemplo:
<form>
<p>Sexo:</p><br/>
<input type="radio" name="sexo" id="hombre" value="hombre" />
<label for="hombre">Hombre</label><br/>
<input type="radio" name="sexo" id="mujer" value="mujer" />
<label for="mujer">Mujer</label><br/>
<p>¿Eres español?:</p><br/>
<input type="radio" name="espanol" id="espanolsi" value="espanolsi" />
<label for="espanolsi">Sí</label><br/>
<input type="radio" name="espanol" id="espanolno" value="espanolno" />
<label for="espanolno">No</label><br/>
</form>

Su resultado:

Sexo:




¿Eres español?:





Los formularios además poseerán otro par de atributos bastante importantes, pero que a nuestros ojos no harán gran cosa aún. Uno es el atributo action (el cual nos indica a qué página debe dirigirse el formulario una vez se rellene) y otro el atributo method (que indica el modo en el que se pasarán los datos). Esto funcionaría así:

<form name="formulario" id="formulario" action="resolucion.php" method="post">
</form>

Este ejemplo sólo es para dar una muestra de lo que sería una etiqueta de formulario "completa", pero realmente ahora mismo los contenidos de "action" y "method" son un poco complicados. En "action" simplemente le escribimos el nombre de la página a la que vamos a enviar el formulario (la extenión ".php" indica que es una página que además contiene código de programación PHP, el cual todavía no hemos visto), indicando qué página se abrirá una vez se pulse un "submit". El "method" sin embargo, es un poco más complejo de explicar, además de necesitar más conocimientos para entenderlo, así que no hablaremos más de él hasta su debido momento.
De las etiquetas "inputs" ya hemos visto unos cuantos posibles atributos. El propio "type" que vimos en una de las primeras etiquetas de formularios es el más importante de los atributos de esta etiqueta, ya que señalará cómo será el aspecto de la etiqueta una vez lanzada la página. Además, los "inputs" tienen una serie de atributos cuyo uso será distinto dependiendo de qué tipo le hayamos asignado (como ocurrió con el "name" en los "radio" y "checkbox" antes visto). Empecemos:

  • El atributo más importante probablemente sea el atributo "value", ya que dentro de él irá el dato que enviaremos al servidor. Pero, dependiendo de qué tipo de "input" será, el "value" será obligatorio u opcional, y se tendrá que usar de una u otra manera:
    • En el caso de los "botones" ("submit", "reset" y "button"), es obligatorio no sólo porque sea el da to que se envíe al servidor, sino porque también será el texto que aparezca escrito encima del servidor. Veamos cómo funciona esto:

    • <input type="submit" name="enviar" id="enviar" value="Enviar"/>


    • En el caso de los campos de texto ("text" y "password"), el atributo "value" no es obligatorio, ya que se supone que es el usuario el que introducirá su valor. Sin embargo, se puede introducir algo de texto predefinido (aunque en el caso del "password" es más bien inútil, ya que no se verá).

    • <input type="text" name="texto" id="texto" value="Introduzca texto."/>


    • En el caso de los "checkbox" y "radio", el "value" es obligatorio y en él hay que introducir el valor que queremos que se envíe. No nos confundamos y creamos que el texto que incluyamos al lado del "input" en cuestión es el dato, incluso aunque le hayamos añadido una etiqueta "label", ya que para el navegador son cosas independientes, y la única manera de indicarle el valor que tiene cada uno de estos elementos es mediante el atributo "value" (como pudimos ver en el ejemplo más arriba).
    • En el caso del "hidden", evidentemente la única manera que habrá de que tenga contenido es mediante el atributo "value". Pero, como de momento no usaremos ningún "input" de tipo "hidden", no creo que nos vayamos a romper mucho la cabeza con esto.
  • El atributo "checked", cuyo único valor posible es, precísamente, "checked", sirve para indicar, en un "checkbox" o un "radio", que ese valor aparecerá marcado por defecto al cargarse la página. Evidentemente, en una lista de "radio" sólo puede haber uno marcado por defecto, de modo que si se marca más de uno, sólo se verá marcado el último. Por ejemplo:

  • <p>Sexo:</p>
  • <input type="radio" name="sexo" id="hombre" value="hombre" checked="checked" /><label for="hombre">Hombre</p>
  • <input type="radio" name="sexo" id="mujer" value="mujer" /><label for="mujer">Mujer</p>

  • Sexo:
  • También puede que queramos que el usuario no pueda usar algún "input" en particular por algún motivo. Para ello usaremos el atributo disabled="disabled", igual que el anterior, bastante simple. Si os preguntáis el sentido de un "input" al que el usuario no pueda acceder, una vez más es algo que probablemente parezca más útil cuando veamos programación. De todos modos, aquí un ejemplo:

  • < input type="text" name="noaccesible" id="noaccesible" value="No se puede escribir aquí." disabled="disabled"/>


  • Otro bastante parecido es el "readonly", con la única diferencia de que en este caso sólo servirá para cuadros de texto ("text" y "password"). Al igual que los anteriores su sintaxis es tan tonta como readonly="readonly" y un ejemplo podéis verlo aquí:

  • <input type="text" name="sololectura" id="sololectura" value="No puedes escribir." readonly="readonly"/>


  • Para los cuadros de texto además hay otros dos atributos que pueden ser interesantes: "size" y "maxlength". El primero indica el tamaño (en número de caracteres) que debe tener el cuadro de texto, mientras que el segundo indica cual es el máximo de caracteres que el  usuario podrá entrar. Veamos un ejemplo:

  • <input type="text" name="caractereslimitados" id="caractereslimitados" value="No más de 15." maxlength="15" size="10"/>


  • Y, finalmente, tenemos un atributo exclusivo del tipo "file": el "accept". Este atributo indicará qué tipo de archivos pueden subirse con este tipo de "input", pudiendo tener como valores: accept="audio/*", accept="video/*" y accept="image/*". No son los únicos tipos de valores, pero sí son los más genéricos y con los que más tendremos que trabajar. Por supuesto, si no incluímos este atributo, podremos subir cualquier tipo de archivo.
Y, bueno, por esta semana esto es todo. Todavía nos quedan ver los atributos de los otros tipos de etiquetas, pero, la verdad, no pensé que fuera a extenderse tanto el "input". Pero, como ya he dicho anteriormente, es una etiqueta complicada, así que hay que trabajarla bien para entenderla.

EJERCICIO

Como os sospecharéis, esta semana vamos a darle atributos a nuestro formulario. Los cuadros de texto deben estar limitados a, como máximo, 15 caracteres cada uno, y adecuados a que se vean sólo 7 caracteres en cada uno. Al entrar debe estar seleccionado el sexo "hombre" y en preferencias "informatica" y la selección de avatar sólo puede permitir subir imágenes.

Bueno, y eso es todo por esta semana, la semana que viene espero, esta vez sí, acabar con los formularios de una vez. Así que, ya sabéis, esta semana, ¡a practicar!

lunes, enero 16, 2012

Desentrañando... Flash

Cuatro han sido las personas que hasta la fecha que han llevado el título del Velocista Escarlata desde la primera aparición del primer Flash en 1940. El primero de todos ellos, Jay Garrick, también es el único que lleva un traje distinto a las demás encarnaciones del superhéroe. Jay era un estudiante universitario en Keystone City que, por un accidente en el laboratorio de química, se desmayó al inspirar los vapores del "agua pesada", el componente que estaba estudiando. Al despertar descubrió los efectos que este vapor había provocado en su cuerpo, siendo capaz de correr a velocidades mayores que cualquier persona.
De esta manera, Jay comenzó su carrera como el superhéroe Flash, enfrentándose a múltiples criminales e incluso uniéndose a la Sociedad de la Justicia de América (JSA) con otros superhéroes de la época. Sin embargo, el tiempo pasó y, por culpa de las manipulaciones de Per Degaton, el gobierno estadounidense empezó a dudar de la fidelidad de la JSA, por lo que les ordenaron que revelaran sus identidades secretas. Los héroes, puestos contra la espada y la pared, decidieron disolver el grupo y algunos como Flash incluso abandonaron la vida superheróica, dedicándose a cuidar de su novia y más tarde esposa, Joan Williams, y su empresa, Garrick Laboratories.
El segundo Flash apareció en los años 60, su nombre era Barry Allen y es probablemente el más popular de todos los Flash. Barry era un policía científico de Central City el cual fue bañado por una serie de productos químicos que fueron alcanzados por un rayo una noche en que estaba en su laboratorio. La fortuita combinación de productos le dio los poderes de Flash, y a partir de entonces empezó a combatir el crimen como había hecho Jay décadas atrás, llevando siempre consigo su traje dentro de un anillo de su invención con el cual, aprovechando su super-velocidad, podía cambiar de vestimenta en una fracción de segundo. En la época que este cómic se publicó, Barry conocía a Jay sólo a través de los cómics del personaje, pensando que era completamente ficticio, hasta que un día, Barry hizo vibrar sus moléculas (una de las habilidades de todos los Flash) de tal manera que se adaptó a la vibración de una tierra paralela, aquella en la que había vivido Jay, y allí conoció a su héroe y fuente de inspiración, y a partir de entonces ambos héroes compartieron muchas aventuras, no sólo ellos, sino también los equipos a los que pertenecían, una renacida JSA y el grupo al que se uniría Barry, la Liga de la Justicia de América (JLA) gracias a la Cinta Cósmica, una invención de Barry que le permitía viajar en el tiempo o entre dimensiones.
La novia de Barry, Iris West, tenía un sobrino de nombre Wally que adoraba a Flash y, como Iris sabía que, de alguna manera, Barry y Flash solían ponerse en contacto, le pidió que le presentara a su sobrino a su héroe. Barry, para complacer a su novia, se disfrazó del velocista y le enseñó sus poderes al chico, además de mostrarle los componentes que le habían otorgado sus poderes. De forma completamente inaudita, otro rayo cayó en ese momento bañando a Wally en los mismos componentes que habían transformado a Barry en Flash, convirtiéndolo en una versión más joven del superhéroe. A partir de entonces, Wally, a quien Barry confesó su identidad, tomaría el alterego de Kid Flash y ayudaría a Flash a enfrentarse a sus enemigos.
Este Flash ha sido el que más cantidad de enemigos ha tenido, aunque todos ellos se han acabado por convertir en enemigos de todos los Flash (sobre todo porque no saben de los cambios que han habido, para ellos sólo han habido dos Flash distintos), a los que se suelen referir como la "galería de villanos" y entre ellos se pueden encontrar a enemigos como el Capitán Frío (el líder de los villanos), el Amo de los Espejos, el Flautista o Trickster.
Las cosas se pusieron feas para Barry con el tiempo. El Profesor Zoom, también conocido como el Flash Reverso, mató a su esposa, Iris, y siguió incordiando en la vida de Barry hasta que éste, furioso, acabó matándolo. Barry fue entonces llevado a juicio por asesinato y las manipulaciones de otro de sus enemigos, Abra Kadabra, lo hubieran condenado, pero, ayudado por el espíritu de Iris que fue enviado al siglo XXX y puesto en un nuevo cuerpo, consiguió derrotar al villano y quedarse a vivir con ella en ese futuro... pero no duraría. Cuando el Anti-Monitor atacó durante la Crisis en Tierras Infinitas, una de sus artimañas fue capturar a Flash para asegurarse de que su habilidada para viajar entre dimensiones no le entorpeciera. Flash logró escapar y evita la destrucción de su Tierra, a costa de su propia vida.
Wally decidió entonces convertirse en el nuevo Flash, usando un traje idéntico al que llevaba Barry (también idéntico al que él mismo llevaba en sus primeros días de Kid Flash, hasta que por algún motivo la Fuerza de la Velocidad le modificó el traje). Así, Wally se convertiría en el primer Flash de la única Tierra que se formó tras la Crisis en Tierras Infinitas, una Tierra en la que tanto Jay como Barry habían sido Flash cada uno en su tiempo. Las habilidades de Wally no eran tan grandes como las de Barry, además de necesitar recargar energía (a base de grandes cantidades de comida). Por otro lado, a diferencia de Barry, Wally tuvo mucha suerte económicamente hablando, llegando al punto de convertirse en una especie de "playboy". También por esta época Wally conoció a la que se convertiría en su futura mujer, la periodista Linda Park.
Con el tiempo, Iris, aún viviendo en el siglo XXX, envió a Wally a su hijo Bart, quien había heredado los poderes de su difunto padre, pero eso estaba provocando que creciera a demasiada velocidad, ya que, con sólo dos años, aparentaba diez. Wally retó a Bart a una carrera por todo el mundo, forzándolo al máximo y deteniendo el metabolismo acelerado del muchacho. A partir de entonces, Bart tomó el nombre de Impulso, un nombre que le venía bastante bien considerando que debido a no haber tenido casi infancia, era incapaz de reconocer el peligro lo cual solía dar bastantes problemas, teniendo que ser tutelado muy a menudo por Wally, Jay y el velocista retirado Max Mercury. Sin embargo, cuando Bart aprendió a hacer duplicados de sí mismo usando la Fuerza de la Velocidad y uno de ellos muere en una batalla, Bart empezó a recapacitar sobre su mortalidad durante una época, abandonando temporalmente su carrera superheróica, para volver con el tiempo convertido en el nuevo Kid Flash.
Durante el enfrentamiento contra Superboy-Primo durante la Crisis Infinita, Wally, Bart, la familia de Wally y algunos otros velocistas fueron enviados todos a una realidad paralela creada por la Fuerza de la Velocidad. Tras varios años en dicha realidad, Bart absorbió la Fuerza de la Velocidad y volvió a la Tierra, mientras que Wally, ya sin poderes, decidió retirarse con Linda y sus hijos. De esta manera, un más adulto Bart Allen se convirtió en el cuarto Flash, aunque no duraría mucho, ya que fallecería en un duro enfrentamiento con los villanos.
De esta manera, Wally, habiendo de nuevo ganado acceso a la Fuerza de la Velocidad, regresó, aunque su vida personal durante esta época no era para nada la de un playboy millonario sino lo contrario, además de tener que lidiar con los problemas de criar a sus dos hijos que han heredado su supervelocidad.
Curiosamente, durante los siguientes años, ambos velocistas muertos volvieron a la vida. Bart fue revivido por la Legión de Superhéroes para enfrentarse a Superboy-Primo y la Legión de Supervillanos. Por su lado, Barry regresó desde la Fuerza de la Velocidad, donde había estado todo este tiempo, al notar la influencia de Darkseid y las atrocidades que iba a cometer durante la Crisis Final.
El status de los tres velocistas fue bastante caótico desde entonces, hasta que recientemente, con la miniserie Flashpoint, donde Barry tuvo el papel protagonista, todo el universo se reescribió, y en el nuevo universo Barry no ha estado casado con Iris y, por tanto, no ha conocido a Wally, por lo que éste no se ha transformado nunca en Kid Flash. Jay parece existir en un universo paralelo, igual que en las historias originales, y Bart... curiosamente sigue existiendo, pero porque parece que está completamente desconectado del tiempo, como se pudo ver también durante Flashpoint.

Lecturas recomendadas:
Flash Comics #1
Showcase #4
The Flash #123
Crisis on Infinite Earths
Infinite Crisis
The Flash - The Fastest Man Alive
Final Crisis
The Flash: Rebirth
Flashpoint