En el anterior tutorial aprendimos como crear una página web y definimos HTML, CSS, W3C y AcidTest.

También aprendimos la sintaxis del HTML y su estructura básica. Finalmente aprendimos dónde escribir ésta estructura y la guardamos para poder copiarla e ir más rápida. Para seguir los tutoriales de aquí, recomiendo tenerlos todos en una carpeta que sepamos dónde está para organizarnos mejor.

Vale. Ahora copiaremos el archivo con la estructura básica y lo pegaremos en la carpeta con el nombre de parte2.html . También le podemos cambiar el título por Parte 2 (lo que hay entre <title> y </title>).

Lo ideal sería ir siguiendo todos los códigos que voy mencionando aquí e ir poniéndolos en el archivo que hemos creado para probar por nosotros mismos ya que, aunque aquí ya mostraré como queda, lo mejor es ir copiando a mano los elementos para ir aprendiendo al ritmo que lees.

Empecemos:

Títulos

En HTML tenemos hasta 6 títulos diferentes según la importancia.

Son éstos:

<h1>Título1</h1>
<h2>Subtítulo</h2>
<h3>Subsubtítulo</h3>
<h4>Subsubsubtítulo</h4>
<h5>Subsubsubsubtítulo</h5>
<h6>Subsubsubsubsubtítulo</h6>

Cada título es más importante que sus inferiores. El H1 suele usarse para el título de toda la página (y del sitio web en general). Por ejemplo, en Barail el h1 sería Barail.

El código que hemos mostrado anteriormente queda más o menos así:

Párrafos

En HTML además de títulos tenemos, por supuesto, párrafos.

Los párrafos se escriben así:

<p>Hola, soy un párrafo</p>

Para ver como quedan… sólo tenéis que fijaros en el texto normal de éste artículo. Son todo párrafos.

Ahora que ya conocemos los títulos y los párrafos me gustaría añadir una cosa: todo texto en HTML debe ir dentro de un elemento de título o párrafo (o código, que los aprenderemos quizá más adelante), no podemos dejar suelto un texto normal directamente en el body.

Líneas horizontales

En HTML podemos insertar líneas horizontales con una “tag vacía” de ésta manera:

<hr />

Y quedan más o menos de la siguiente manera:

En HTML podemos insertar un salto de línea sin tener que insertar dos párrafos distintos. Atención: Los saltos de línea no sirven para sustituir a los párrafos. Sólo se deben usar si son estrictamente necesarios:

Se escriben de la siguiente manera, en otra “tag vacía”:

<br />

El resultado que dan es bastante previsible. Aun así voy a mostrar un ejemplo:

Hola.
Hola. Yo estoy debajo porque me han puesto un salto de línea.

Formateando el texto

Hay muchas maneras de formatear un texto en HTML. Nótese que éstos elementos, ya que actúan sobre un texto, deben estar dentro de un párrafo (o título…):

<p><strong>Texto fuerte</strong></p>
<p><em>Texto con énfasis</em></p>
<p>H<sub>2</sub>O</p>
<p>3<sup>2</sup> = 9</p>
<p>He <del>borrado</del> un texto para <ins>insertar</ins> otro</p>
<p><abbr title="Loud of laughs">LOL</abbr></p>
<p><q>Soy una cita</q></p>

Ésto muestra:

Texto fuerte

Texto con énfasis

H₂O

3² = 9

He borrado un texto para insertar otro.

LOL

Soy una cita

Más bloques de texto

Hasta ahora hemos visto los párrafos y los títulos como bloques de texto. Pero hay más:

<pre>Soy un código</pre>
<address>Soy una dirección</address>
<blockquote>Soy una cita en bloque de texto</blockquote>

Ésto quedaría así:

Soy un código

Al ser éstos bloques de texto, no deben estar en ningún párrafo ya que un párrafo es también un bloque de texto.

Enlaces

En HTML podemos diferenciar tres tipos de enlaces: los enlaces absolutos, los enlaces relativos al documento y los puntos de fijación. Todos los tres tipos de enlace se escriben con la misma etiqueta: <a>.

Los primeros, los enlaces absolutos, nos pueden enviar a cualquier documento de la red. Son aquellos que empiezan con http:// y contienen toda la dirección web en sí. Los relativos al documento son enlaces a otros documentos de nuestro mismo servidor, y se escriben usando de principio a nuestro documento. Por ejemplo, si queremos enlazar a un html llamado “acerca-de.html” escribiremos el enlace a “acerca-de.html”. Si está en la carpeta “informacion”, podemos escribir “informacion/acerca-de.html”. Si está en una carpeta al exterior de la carpeta que contiene nuestro documento (por ejemplo, si nuestro documento es acerca-de.html y queremos enlazar al documento anterior), escribiremos “../documento.html”. Estos ../ podemos escribirlos tantas veces como queramos para situarnos a carpetas más lejanas a la nuestra, de la misma manera que podemos acceder a carpetas que están dentro de carpetas dentro de carpetas que están dentro de carpetas (…) dentro de la carpeta dónde está nuestro documento.

Finalmente tenemos los enlaces al mismo documento. Éstos enlaces funcionan de una manera curiosa. Primero tenemos que crear una referencia en nuestro documento, por ejemplo “conclusión” dentro de una página muy larga en el lugar dónde está nuestra conclusión. Después podríamos escribir un enlace a “#conclusión” y cuándo se pulsase, se bajaría la scrollbar de la página hasta llegar a la conclusión.

Para los primeros dos, los absolutos y los relativos los escribiremos en el atributo href. Por ejemplo: href=”http://www.google.es/” llevaría en una ruta absoluta a Google. De la misma manera, podemos enlazar a una ruta relativa sin el http, como hemos aprendido antres.

Para hacer los últimos podemos hacer lo siguiente. La referencia se crea rodeando a la sección a la que nos referiremos con a y un atributo name para darle nombre a la sección. Después, para acceder allí hacemos un a href normal con “#nombre-sección”

Imágenes

Las imágenes se insertan con la etiqueta vacía <img />. Para decirle dónde se encuentra la imagen que queremos insertar podemos utilizar dos de los tipos de rutas que utilizamos con los enlaces: rutas absolutas o relativas al documento y las insertaremos en el atributo src. También debemos insertar una descripción de la imagen con el atributo alt que se mostrará si la imagen no puede cargarse o el navegador las tiene deshabilitadas.

Hasta aquí hemos aprendidos suficientes elementos de HTML para hoy.

Mañana aprenderemos a insertar tablas, listas y formularios. También aprenderemos acerca de las “entities” y elementos que podemos añadir al “head”, como por ejemplo las “META”. ¡Hasta la parte 3!

Visita la parte 1 de éste tutorial

¿Alguna vez has deseado crear tu propia página web? ¿Quizá para enseñarla a tus amigos, o puede que algo más serio? Dan igual las razones. ¡En este artículo te enseñaré a crear tu propia página web!… ¡¡y de manera muy simple!!

Primero, un poco de conceptos.

¿Cómo la vamos a crear?

Primero de todo necesitamos saber cómo crearemos nuestra página web. Bien, usaremos HTML para el contenido y la estructura y CSS para la presentación. Más específicamente, las versiones 4 y 2 de éstos lenguajes respectivamente.

¿HTML?

HTML (HyperText Markup Language o Lenguaje de marcado de hipertexto) es el lenguaje de marcado (lenguaje de marcado es una forma de codificar el texto que, junto con el texto en sí, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación) predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.

¿CSS?

CSS (Cascading Style Sheets o hojas de estilo en cascada) es un lenguaje usado para definir la presentación de un documento estructurado en HTML (y otros).

La razón principal de la existencia del CSS es separar la estructura de un texto de su presentación.

Creo que ya están definidos los términos más básicos a los que nos referiremos en éste tutorial. Sin embargo, creo que definir a los estándares y al W3C es también primordial.

El W3C y sus estándares

El W3C (World Wide Web Consortium – consorcio para la web) es un consorcio internacional que produce recomendaciones para la WWW (World Wide Web) o simplemente web. Está dirigida por Tim Berners-Lee, el creador original de URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol – Protocolo de transferencia de hipertexto) y HTML que son las principales tecnologías sobre las que se basa la Web.

El W3C tiene unos estándares (o recomendaciones) que son una serie de reglas para HTML, CSS, etc. y que sirven para que todas las web estén escritas con los mismos elementos y para que todos los navegadores visualizen una web de la misma manera (Internet Explorer de Windows es famoso por no cumplirlos. Los otros navegadores los cumplen todos o casi todos).

AcidTest

Por último, como extra acerca de los estándares, os mencionaré el AcidTest. El AcidTest es un test que prueba la capacidad que tiene un navegador para cumplir los estándares. Existen tres de ellos: el 1, el 2 y el 3. Todos los navegadores intentan ser los que pasen los tests con una puntuación del 100%. Actualmente, en el último test solo alcanzan un 100% los navegadores basados en WebKit, como Safari o Google Chrome.

¡Desafía a tu navegador!

Finalmente, creo que ya conocemos todos los conceptos necesarios para crear una web en HTML. Ahora voy a explicaros cómo organizaré el tutorial: Primero explicaré HTML y después le añadiremos CSS.

Bien, empecemos!

Objetos de HTML

HTML está compuesto por objetos (de hecho, no sé como llamarlos) muy básicos. Los elementos y los atributos.

Los elementos se definen con etiquetas. Por ejemplo: <strong>Hola</strong>. Hola sería un elemento de negrita. Los elementos siempre empiezan con una etiqueta de principio y una de fin. La etiqueta de principio es <nombredelaetiqueta> y la de fin </nombredelaetiqueta>. El contenido del elemento será lo que está entre éstas dos etiquetas.

Algunos elementos no tienen contenido, como por ejemplo las imagenes, ya que es ilogico que haya algún contenido. En éste caso se escriben así: <nombredelaetiqueta /> (con el espacio antes de la barra de fin).

También tenemos los atributos. Los atributos establecen propiedades en los elementos. Por ejemplo: <a href=”http://www.barail.es”>Barail</a>. A significa enlace. Con esta etiqueta, estamos diciendo que Barail es un enlace. Además, tiene un atributo que es href. El atributo href significa dónde dirige el enlace. Aquí vemos como se escribe un atributo:

<nombredelaetiqueta atributo=”valor”>Contenido</nombredelaetiqueta>.

Como podemos comprobar, los atributos se definen sólo a la etiqueta del principio.

Ya sabemos qué objetos tiene un archivo HTML.

Estructura básica de un documento HTML

Todo documento HTML tiene una estructura básica, una serie de elementos obligatorios que forman los cimientos dónde vamos a trabajar.

Ésta estructura, en HTML 4, es (en otras versiones cambia sólo la primera línea):

1
2
3
4
5
6
7
8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Título</title>
	</head>
	<body>
	</body>
</html>

Vamos a explicar los elementos que podemos ver aquí.

El primer elemento, el tal DOCTYPE es especial. Lo único que debemos saber de él junto con sus contenidos es que nos dice que el archivo está escrito en HTML4 estricto (estricto significa que los elementos definidos como deprecated [no-usados o algo así sería la traducción] no se pueden usar [a diferencia de Transitional]).

El elemento html, que es el que viene a continuación, significa que lo de dentro es html. Por supuesto es obligatorio.

Después viene el head. En el head se establecerá la información de la página que no se muestra en su contenido. El único elemento obligatorio del head es el título de la página. El título es el texto que se muestra en cada pestaña de tu navegador o en el título de la ventana.

Después del head se encuentra el body. Es dónde irá el contenido que se ve en una página.

¿Dónde y cómo escribiremos ésta estructura?

Ésta estructura debe ser escribida como archivo HTML (archivo con extensión .html). Para escribir archivos de éstos podemos hacerlo con cualquier editor de código fuente. Una vez hemos guardado el archivo, se puede abrir con un navegador para mostrarlo en forma de página web.

Para finalizar, guardaremos ésta estructura en un lugar accesible. La copiaremos siempre que querramos hacer una nueva página HTML: nos ahorrará tiempo.

Hasta aquí la primera parte del tutorial. En la siguiente empezaremos a revisar algunos elementos HTML. ¡Hasta la próxima!

En éste artículo veremos por encima qué es Ruby on Rails (y por supuesto, qué es Ruby) y las facilidades que ofrece entorno a PHP.

¿Qué es Ruby?

Ruby es un lenguaje de programación orientado a objetos e interpretado creado por el japonés Yukihiro Matsumoto. Está bajo las licencias libres y de código abierto GPL y Licencia Pública Ruby.

Ruby tiene una sintaxis muy simple, ideal para los que se adentran a los lenguajes de programación y tampoco es mala para los ya experimentados.

¿Qué es Ruby on Rails?

Una de las mejores razones para usar Ruby es Ruby on Rails. Ruby on Rails, conocido también como Rails a secas o RoR es un framework (conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular) de aplicaciones web y de código abierto.

Ruby on Rails es bastante sencillo de utilizar, en gran parte gracias a que Ruby es bastante sencillo de utilizar también. Pero también lo es gracias a su arquitectura MVC: Modelo Vista Controlador.

Está pensado para emfatizar Convention over Configuration (CoC) y Don’t Repeat Yourself (DRY).

Lo primero quiere decir que el programador solo necesitará establecer configuraciones para aspectos extraordinarios de su aplicación. Por ejemplo, si creamos un modelo “Usuario”, la correspondiente tabla en la base de datos se llamará “usuarios” y el programador no tendrá que especificarlo.

Don’t Repeat Yourself significa que una pieza de código dentro de una aplicación nunca debería repetirse, facilitando así la modificación posterior del código. Por ejemplo, si queremos que varias clases dentro de nuestra aplicación redireccionen a alguna página determinada y muestran un mensaje, podríamos crear una función accesible para todas las clases que la quieren usar que se encarga de esto, aceptando como parámetros el mensaje a dar y el lugar dónde redireccionar. Incluso, si varias páginas redireccionan al índice, podríamos crear otra función que llama a la función de redireccionar y mostrar mensaje con los parámetros de lugar a redireccionar establecidos como índice y aceptando únicamente el mensaje a dar.

¿Qué es la arquitectura MVC?

Lo siento si antes os habéis quedado con las ganas de saber qué era la arquitectura MVC, pero creo que se merece otra sección a parte.

La arquitectura Modelo Vista Controlador es un estilo de arquitectura de software que separa los datos, la interfaz y la lógica que los controla en tres componentes distintos: el modelo, la vista y el controlador.

• Modelo: Es el encargado de proveer de datos al controlador. En Ruby on Rails, además, es el que tiene acceso a datos en la base de datos, usando el paradigma “ActiveRecord”
• Controlador: Responde a eventos, usualmente ocasionados por el usuario, y hace peticiones al modelo o a la vista según convenga.
• Vista: Presenta a un modelo, mediante el controlador, en un formato adecuado para interactuar. Normalmente es la interfaz del usuario.

Hasta aquí hemos aprendido qué es Ruby, Ruby on Rails, y la arquitectura MVC. Seguramente vuestras conclusiones serán que Ruby on Rails es utilizado para realizar aplicaciones web, de manera similar que con PHP. Así es. ¿Y si los comparamos un poco? No. PHP es un lenguaje, Ruby on Rails es un framework. Aún así, puedo deciros que PHP es más rápido y que Ruby on Rails es más productivo a la hora de programar, que los servers de PHP abundan mientras que uno de Ruby on Rails es bastante difícil de encontrar…

Espero que con ésta introducción a Ruby, Ruby on Rails y MVC os haya abierto el apetito a Rails, porque ahora estoy preparado para saciarlo.

Para empezar… Agile Web Development with Rails

Agile Web Development with Rails es una buena forma de empezar con Rails. La primera parte del libro te enseña a instalarlo a tu ordenador, y después te explican paso a paso como crear una aplicación de e-Commerce mediante Rails, mientras te van introduciendo al lenguaje.

La segunda parte del libro, te enseña ya TODO lo de Rails, y en los apéndices incluso un poco de Ruby si no sabes (aunque se recomienda saber Ruby para utilizar Ruby on Rails).

Para aprender Rails no es necesario del todo leerse la segunda parte, pero sí es beneficioso.

Una vez hemos empezado… ya podemos realizar nuestras aplicaciones tranquilamente, que ya lo sabemos todo. Pero quizá queramos un poco de ayudita. ¿Cómo creo un buscador? ¿Cómo cuelgo fotos mediante Rails? Aquí es donde entran los…

Railscasts

Los Railscasts son un conjunto de screencasts (videotutoriales) grabados todos por el magnífico Ryan Bates y que salen cada lunes por la mañana. Éstos screencasts te enseñan varias cosas muy útiles cómo crear un formulario de búsqueda, colgar fotos usando el plugin Paperclip, etc., etc., etc.

Además, puedes subscribirte a los Railscasts usando cualquier aplicación que soporte los podcasts, como por ejemplo iTunes.

Sé que hay muchos más recursos para Rails, pero éstos son los que más útiles me han sido a mí para realizar StickNote, y espero que os sean igual de útiles a vosotros! .

Saludos!

Hoy en éste artículo haré un repaso a 3 editores de código fuente que personalmente me han gustado más. Pero antes…

¿Qué es un editor de código fuente?

Seguramente, si te has parado a leer este artículo es porque conoces más o menos bien el tema… pero nunca está de más explicar qué es lo que voy a recomendar. Un editor de código fuente, es un editor de texto (¡cuidado! No confundir editor de texto con procesador de textos. Un editor de texto no permite el formateo de textos, y por lo tanto al guardar sólo guarda el contenido y no la información de cómo éste debe mostrarse… característica indispensable para cualquier archivo con código de programación dentro. Un procesador de textos [Micrsofot Office Word o OpenOffice.org Writter lo son] en cambio, está especializado en formatear el texto de miles de maneras distintas y por lo tanto, guarda la información de formato junto al texto) diseñado específicamente para editar (o crear) el código fuente de un programa (siendo el código fuente de un programa un conjunto de instrucciones que debe realizar un ordenador al ejecutar el programa).

Los editores de código fuente pueden presentarse como aplicaciones individuales, o formando parte de un IDE (entorno de desarrollo integrado, en inglés Integrated Development Environment), tema que quizá extenderé en otra ocasión.

Éstos editores pueden especializarse en un solo lenguaje de programación o incluir un conjunto de ellos. Al estar especializados en la tarea de programar, los editores ofrecen características únicas que son muy útiles al usuario, siendo la más común y básica de ellas la syntax highlighting es decir, resaltador (o coloreado) de sintaxis, que se encarga de mostrar de distintos colores y tipografía los distintos elementos del código fuente de un programa, como pueden ser las variables, las constantes, las palabras reservadas, etc.

Una vez hemos definido qué es un editor de código fuente, voy a exponer los 3 que me gustan más. Debido a que algunas características pueden ser comunes en varios editores distintos, solo definiré cualquier característica la primera vez. Es decir, ya que ya he definido que es el resaltado de sintaxis no volveré a hacerlo. También me gustaría añadir que no están ordenados por orden de mejor a peor, preferencias, etc. si no en orden alfabético.

jEdit

Editando una hoja de estilos de StickNote

jEdit es un editor de código fuente escrito en Java. Es multiplataforma y tiene un sistema para incorporar montones de plugins en el programa.

El programa viene con un resaltador de sintaxis para más de 130 lenguajes de programación distintos y la posibilidad de añadir más con un simple archivo XML o incluso descargarlos. Nos ofrece una lista con múltiples plugins para instalarlos y ejecutarlos con un solo click, entre los cuales se encuentran, por exemplo, uno que convierte el código que estás viendo con jEdit (incluyendo los colores) a HTML, haciendo que puedas pegar tu código con los colores y todo en cualquier página web y permitir una mejor lectura de éste.

Voy a poneros el ejemplo de la hoja de estilos de StickNote aquí gracias al plugin (solo un pequeño fragmento):

 1 body
 2 {
 3   background: #13006a url('../images/body_bg.png') repeat-x fixed;
 4   font-family: Arial, Helvetica, sans-serif;
 5   font-size: 11pt;
 6   text-align: justify;
 7 }
 8 a img
 9 {
10   border: 0;
11 }
12 #container
13 {
14   background: #fff;
15   width: 95%;  
16   margin: 0px auto;
17   padding: 10px;
18 }

jEdit es muy configurable y personalizable y, como hemos visto, tiene gran cantidad de características, plugins y lenguajes de programación incorporados además de ser multi plataforma. Yo considero a jEdit una opción bastante recomendable.

Finalmente, aquí tenemos una lista más completa de todas las características que tiene incorporadas (en inglés): Lista de características de jEdit

Si os ha gustado éste programa, podéis descargarlo desde éste enlace. Tiene bastantes versiones para descargar ya compiladas, escoge la que se adecue a tu sistema operativo: Descargar jEdit

Notepad++

Captura de pantalla de Notepad++

Notepad++ es un editor de código fuente bastante completo que soporta varios lenguajes de programación, aunque solo se ejecuta en Windows, así que si no usas el sistema operativo de Microsoft ya te puedes ir olvidando de Notepad++.

Es de código abierto y tiene, como todos los editores de código fuente, resaltado de sintaxis, pudiendo personalizar los colores como extra.

Además, tiene autocompletado y puede editar varios documentos al mismo tiempo e incluso el mismo documento pero en varias partes distintas por ventana. (muy útil para LARGOS archivos CSS).

También posee de un gran sistema de plugins y macros.

En fin, si usas cualquier Windows para programar, el mejor editor de código fuente que puedas encontrar es Notepad++. Y puedes descargarlo aquí: Sitio web de Notepad++

TextMate

Editando la hoja de estilos de StickNote en TextMate

TextMate es definitivamente la mejor opción si estás usando un Mac (de hecho, me atrevería a decir que es el mejor editor de código fuente) ya que sólo funciona en los sistemas operativos de Apple.

Aún ser un programa de pago (con 30 días de prueba), vale la pena. Ofrece, como todos los editores de código fuente, la capacidad de resaltar la sintaxis.

Pero TextMate, además, nos permite abrir carpetas enteras y con ésto podremos explorarlas en una barrita lateral que nos sale al lado de la aplicación: muy útil si estás trabajando en un proyecto con varios archivos, ya que te lo abrirá todo en pestañas.

TextMate ofrece también un autocompletado que se activa con Tab (si escribes if cuándo estás editando en JavaScript y pulsas Tab, te sale ésto: “if (true) {};” seleccionándose el true para que a la que escribas algo se cambie). También ofrece grabación y reproducción de macros y un EXTENSO sistema de plugins con MUCHOS plugins. Ofrece tareas que se realizarían desde la terminal para muchos lenguajes con un simple click yendo a sus plugins (siendo la mayoría ya preinstalados), llamados Bundles en TextMate, a los cuales puedes acceder desde “Bundles -> {lenguaje} -> {bundle}” o con un acceso de teclado que previamente habrás configurado.

El programa es muy costumizable, pudiendo cambiar los temas entre varios de incluidos e incluso descargar más. Yo, por ejemplo, uso el tema de Railscasts (me enamoré de él cuándo lo vi) que se puede descargar aquí: Página “Acerca de” de Railscasts, tercer apartado “TextMate Theme”.

Las características que he repasado aquí son muy pocas comparando con las que lleva el programa, pero es que podría hablar de él en un artículo entero… En fin, si usáis Mac, no dudáis más y poneros TextMate.

¿Por qué no has incluido x o y editor de código fuente que me gusta más?

Es verdad. No he incluido emacs. Perdona mi pecado, señor Stallman. Pero… es que no encuentro Emacs intuitivo y no me gusta. Y aún me gusta menos hablar de cosas que no me gustan (y aún así hablo de Windows…). Tampoco he incluido vi por la misma razón.

¿Y Eclipse? ¿Por qué no has incluido a Eclipse? Hmm… Podría haber incluido a Eclipse, pero es que Eclipse es mucho más que un editor de código fuente, es un entorno de desarrollo integrado (IDE) y creo que se merecen un artículo a parte (quizá por mi parte).

La conclusión a la que puedo llegar fácilmente es:

• Si usas Linux ->jEdit o GEdit =P
• Si usas Windows -> Notepad++
• Si usas Mac -> TextMate

¡Espero que os haya gustado el artículo!

Hoy os presentaré cinco refranes bastante conocidos… y os explicaré qué quieren decir.

Pero todo esto lo realizaré de una manera… divertida. ¡Os lo presentaré en forma de diálogo cómico!

Padre e hijo están en el campo. El padre es granjero y el niño está aprendiendo de él para cuándo sea mayor trabajar la tierra también.

Niño: ¡Oh, madre mía! Está todo el campo hecho polvo. Alguien se ha comido la mayoría de verduras.

Padre: ¡Seguro que han sido los cuervos! ¡Ya te dije yo… que no, que no! A ver… ¿Por qué? Es que ¿tenías que insistir? Claro… te los quedaste, los criaste y… ¡mira ahora! Cría cuervos para que te saquen los ojos…

Niño: No… Papá… ¡no han sido los cuervos! ¿No ves que están todos en su jaula? Además, el dicho no se refiere exactamente a cuervos. A ver, el dicho de “Cría cuervos para que te saquen los ojos” se aplica para indicar la ingratitud de aquellas personas que, debiendo grandes favores, los olvidan o los pagan con acciones injustas o palabras molestas.

Padre: Hmm… ¿Dónde te lo enseñaron esto? ¿En la escuela?

Niño: S-sí…

Padre: Claro… ¡y también te enseñaron a criar cuervos! Seguramente… ¡pues mira, niño! ¡Vas a quedarte castigado durante tres meses! Por culpa tuya el cultivo se ha ido al estómago de un cuervo. ¡Me estoy enfadando mucho! ¡Castigado un año! ¿Un año…? ¡dos!

Llega la madre.

Madre: Perro ladrador, poco mordedor.

Niño: ¿Qué quiere decir?

Madre: Se dice de una persona que alardea mucho a la hora de hacer efectivas sus amenazas o insultos pero que al final no las lleva al cabo.

Niño: ¿Y eso significa…?

Madre: Que estés tranquilo… ya conoces a tu padre. Grita mucho cuándo se enfada… y suele enfadarse muy a menudo… pero no mataría ni a una mosca. Ya verás que dentro de poco ni se acordará de lo que te ha dicho.

Padre: Quien siembra vientos, recoge tempestades… Los dos sois iguales… madre e hijo. ¡Los dos con las explicaciones de los refranes por aquí… las explicaciones de los refranes por allá…!

Niño: Papá… has vuelto a usar un refrán de forma un tanto rara también. “Quien siembra vientos, recoge tempestades” es similar al de los cuervos y significa que los malos ejemplos e ideas, tienen funestas consecuencias. Y… yo creo que esto de explicar refranes no sea funesto.

Padre: Lo que decía yo…

De repente se oye el sonido de un motor… Llega un vecino de la família de agricultores y les grita…

Vecino: ¡Vecinos! Lo siento mucho por lo que ha pasado en el campo… ha sido por culpa de mi perro. Lo siento, en serio. ¡Pero he venido aquí para ayudaros! Tranquilos ¡que ya he llegado! Vengo a ayudaros ¡a restablecer los cultivos!

Padre: Pues ya que estás… podrías hacerlo todo tú, ya que has sido el que lo ha roto.

Madre: A caballo regalado no le mires el dentado… es decir, que si te dan una cosa no le busques lo malo porque igualmente no lo has pagado. Vecino, deja a mi marido… ya lo conoces.

Vecino: ¡Sí, sí! No te preocupes que os ayudo… ¡y quizá plantamos algo de más!

Niño: No hay mal que por bien no venga…

Padre: ¿Hmm?

Madre: Quiere decir que a veces, algo negativo trae consecuencias positivas.

¡Espero que os haya gustado!

¿Os ha sorprendido el vídeo de arriba? Seguramente no. No nos sorprende mucho que un ojo baile y le cambie su iris por el logo de un tal Flowplayer…

¡Pero es que no es el vídeo en sí lo que tiene que sorprender! Fijaos en los controles… no son de YouTube. No son de Google Video. Son de… ¡Flowplayer! ¿Y qué es Flowplayer? Es lo que vamos a explicar en este artículo.

¿Qué es Flash?

Si ya sabéis qué es Flash, podéis saltaros ésta sección: solo explica lo más básico.

Querido lector: seguramente hayas visitado sitios web con contenidos Flash, aunque no lo sepas. Entre éstas están YouTube, todos los portales de juegos flash, entre muchas otras. Flash es un sistema que permite visualizar contenidos multimedia en un mismo sitio web mediante el plugin FlashPlayer. Gracias a Flash tenemos los juegos flash o las páginas que permiten visualizar vídeos allí mismo.

¿Qué significa Streaming?

El streaming es la capacidad que tiene tu navegador de reproducir audio y vídeo sin necesidad de descargar los archivos. La tecnología de streaming lo que hace es ir descargando los datos del archivo de audio o vídeo que desees reproducir y guardarlos en un buffer de datos (un buffer de datos es un espacio en la memoria utilizado para almacenar datos temporales y que la aplicación que lo usa se quede en algún momento sin datos) mientras vas reproduciendo el archivo. Ésto hace que se pueda reproducir cualquier archivo casi al instante (casi porque tiene que guardar algo en el buffer antes de poderlo mostrar) y con pocas interrupciones (a veces la reproducción del vídeo atrapa a los datos que haya en el buffer). Es decir, es la tecnología que nos ha permitido ver el vídeo de arriba sin necesidad de descargarlo.

Hablemos de Flowplayer

Una vez introducidos los conceptos de Flash y Streaming podemos empezar a hablar de Flowplayer. Flowplayer es una aplicación Flash que cualquier desarrollador web (o usuario) insertar vídeos en cualquier sitio. Sí, ya sé que con YouTube puedes subir un vídeo allí y ponerlo en cualquier página web… pero… ¿y si queremos algo más personalizable? ¿y si no queremos colgar nuestros vídeos en YouTube si no en nuestro propio servidor? ¿y si queremos ofrecer nuestro propio servicio de hosting de vídeos? ¿y si…? ¡Aquí es dónde Flowplayer entra en acción!

Flowplayer, como ya hemos explicado anteriormente, permite insertar nuestros propios vídeos en cualquier sitio (usualmente nuestro propio sitio web). Lo mejor de la aplicación es que no tenemos que liarnos con los object o los embed, si no que con un simple código JavaScript podemos insertar nuestro vídeo… ¡y sin necesidad de entender realmente JavaScript! Además… podemos configurar el reproductor de una manera brutal… el skin, añadirle elementos HTML encima, añadirle subtítulos… ¡de todo! Y sólo con añadir una línea más en el código que inserta nuestro vídeo. Además, Flowplayer nos permite reproducir bastantes formatos de vídeo que quizás nuestro navegador por sí solo no puede, como MP4, FLV ¡y muchos más!

Vale… FlowPlayer me gusta y quiero usarlo. ¿Cómo lo hago?

¡Vamos a aprender a usar FlowPlayer! Primero de todo tenemos que descargarlo, pulsando aquí:

» Descarga FlowPlayer «

Ésto nos llevará a una página con cuatro FlowPlayer distintos. ¿Cuál elegir? La elección es muy simple: si no quieres pagar elige el primero: es gratis e incluso open-source. Si quieres pagar, elige uno de los otros tres según cómo vayas a usarlo.

Una vez lo tenemos descargado, tenemos que subir los siguientes archivos a nuestro servidor: en la misma carpeta guardaremos flowplayer-3.1.5.swf y flowplayer.controls-3.1.5.swf (el número de versión puede ser distinto). Da igual el nombre de la carpeta y da igual dónde está en nuestro servidor: solo necesitamos acordarnos de la ruta de la carpeta y que éstos dos archivos estén juntos.

También tendremos que subir otro archivo. Es el archivo “flowplayer-3.1.4.min.js” y podemos subirlo dónde queramos (incluso en la misma carpeta que los dos swf) mientras nos acordemos de su ruta.

¡Ya tenemos todos los archivos que necesitaremos en nuestro servidor! Ahora toca insertar el vídeo en nuestra página.

Primero tendremos que insertar éste código (en cualquier lugar del head o del body):

<script src="ruta/a/nuestro/flowplayer-3.1.4.min.js"></script>

Después insertaremos éste código dónde queramos insertar el vídeo:

<a href="ruta-al-archivo-de-vídeo" style="display:block; width:425px; height:300px;" id="player"></a>

Puedes modificar los parámetros para que quede como te guste… pero tiene que tener una ID para después poderle insertar el vídeo mediante JavaScript.

<script language="JavaScript">
flowplayer("player", "ruta/al/flowplayer-3.1.5.swf"); //El primer parámetro ("player") es la id del contenedor del vídeo
</script>

Ésta es la addición mínima de código que necesitamos para añadir nuestro vídeo.

¿Y ahora qué?

En éste artículo hemos aprendido qué era Flash y Streaming. También hemos conocido a Flowplayer y hemos aprendido una manera simple de insertarlo. Pero recuerdo que cuándo os explicaba qué era Flowplayer os decía que puedes configurarlo de muchas maneras.

¡Pues sí! De hecho, deciros todas las maneras posibles de configurar un vídeo de FlowPlayer multiplicaría por 100 (por lo menos) la longitud de éste artículo… pero puedo daros dos enlaces muy útiles que os enseñarán a hacer todo ésto.

Primero están las llamadas FlowPlayer Demos. Son simplemente mini-tutoriales que nos enseñan a hacer distintas cosas con nuestros players. Aquí están: http://flowplayer.org/demos/index.html

También tenemos la documentación de FlowPlayer. Aviso que puede resultar un poco difícil de tragar si no se tienen conocimientos de JavaScript y que la mayoría de cosas que explica no interesan si no conoces el lenguaje. Aun así, si lo conoces, conocer la documentación te será genial para poder realizar lo que quieras con el reproductor. ¡Aquí está!: http://flowplayer.org/documentation/index.html

(los dos enlaces están en inglés)

Concluyamos. Hemos aprendido los términos Flash y Streaming, hemos aprendido ¿qué es? y ¿cómo usar? FlowPlayer. Ahora ya podemos insertar los vídeos alojados en nuestro host en nuestras páginas con un reproductor altamente configurable.

Los usos de FlowPlayer son muchos. Podríamos hacer una simple página con nuestros vídeos… sí. Pero con bastante facilidad podemos construir nuestro propio sitio web mediante algún lenguaje como PHP, Python o Ruby on Rails que permita alojar vídeos. Y éstos vídeos podrían reproducirse… ¡sí! ¡lo habéis adivinado! ¡con FlowPlayer!

Saludos!

Seguramente la inmensa mayoría de lectores de éste blog usáis OpenID, aunque la mayoría de ésta inmensa mayoría no lo sepáis. Bien: si tenéis cuenta en Google, usáis OpenID y lo mismo se aplica con Yahoo, Livejournal, Blogger, Flickr, MySpace, WordPress, AOL, myOpenID y muchos, muchos más (los más conocidos, y como usarlos, están listados aquí). En éste artículo os voy a explicar ¿qué es?, ¿para qué sirve? y ¿cómo lo uso?

¿Qué es, para qué sirve y cómo uso OpenID?

OpenID es un sistema de identificación digital con el cuál un usuario puede identificarse a cualquier sitio web con la misma cuenta, con el objetivo de que el usuario no deba poseer diferentes cuentas: una por cada sitio web que use, si no poder usar la misma (OpenID) en todos los sitios web que lo soporten. OpenID es simplemente un enlace a tu cuenta en uno de los muchos proveedores de OpenID que existen (sí, los enlaces que aparecen en la introducción).

¿Que qué acabo de decir? Vamos a extenderlo de una manera más fácil. Imaginemos un mundo en el cuál solo existiera OpenID. Cada usuario tendría su propia cuenta OpenID en su proveedor favorito. Ahora imaginemos que el usuario quiere conectarse a YouTube. Ya que en el mundo imaginario TODO usa OpenID, YouTube le pediría tan sólo un campo para entrar en el sitio web: el Open ID. El usuario lo introduciría (en el caso de, por ejemplo, myOpenID sería usuario.myopenid.com) y YouTube haría el resto para conectar el usuario con éste Open ID. ¿A que es sencillo? Además, creo que es bastante cómodo para cualquier usuario tener una sola cuenta para todos los servicios que use.

Tutorial

Vamos a facilitar aun más el entendimiento y uso de OpenID con un sencillo tutorial que nos ayudará a aclarar conceptos. El objetivo del tutorial será registrarnos en ésta página usando OpenID: http://pibb.com/

Primero de todo debemos crearnos un OpenID en alguno de los proveedores que nos ofrecen el servicio. Yo recomiendo myOpenID (http://www.myopenid.com/). Entramos en myOpenID, pulsamos “Sign up  for an OpenID”, rellenamos los campos y finalizamos el registro. Ahora nuestra OpenID es usuario.myopenid.com, siendo usuario el nombre de usuario que hagáis introducido.

Ahora vamos a Pibb y pulsamos en Sign In (it’s free!). Nos saldrá una popup donde introduciremos nuestra OpenID. Pulsamos Sign in y nos saldrá otra Popup dónde nos conectaremos a myopenid (o el proveedor que hagamos usado). Nos pedirá si permitimos a Pibb acceder a nuestra OpenID. Pulsamos permitir (si queremos, podemos recordar nuestra acción). ¡Ya estamos registrados a Pibb con nuestra OpenID!

¿Verdad que ha sido fácil? ¡Pues así es OpenID!

¿Eres desarrollador?

Si desarrollas aplicaciones web o sitios web seguramente te interesa implementar el sistema OpenID en lugar de un sistema de cuentas propio… o incluso JUNTO a un sistema de cuentas propio. Implementar OpenID en tu sitio web puede ser una tarea difícil… ¡o lo era!

Gracias a Open ID enabled, implementar OpenID en tu sitio web es pan comido. Ofrece librerías para sitios desarrollados en PHP, Python o Ruby. Así que, si tienes alguna web desarrollada con uno de éstos lenguajes y quieres implementar OpenID, visita OpenId Enabled!.

¡Y no solo está Open ID enabled! También nos encontramos con RPX: User Engagement Made Easy. RPX te permite insertar un sistema para conectar usuarios en tu web usando OpenID. ¡Y no solo ésto! Si no que te lo muestra con una interfaz agradable, separando diferentes proveedores como Google o insertando más como Facebook. Y por si no fuera poco, se ofrece como sistema de Plugin en WordPress y Drupal! ¡Si te gusta RPX y quieres insertarlo en tu sitio web, visita la web de RPX!

Espero que os haya gustado el servicio de OpenID. Si eres desarrollador, ¡te animo enormemente a incluirlo! Y si eres usuario… ¡prueba a conseguir uno! Verás como usar OpenID en sitios que lo permiten es 1000 veces más sencillo y cómodo que tener una cuenta por cada web.

Antes que nada, me gustaría advertir a todo lector al que le guste armar polémica o a todos los susceptibles de por aquí. A ver, se me hará muy difícil revelaros ésto, casi más que revelar que ¡Papá noel son los padres!… Bien, estoy mentalmente preparado… ¡Ésto del fin del mundo es una broma! Es que parece mentira que haya gente que se tome en serio éstas bromas y se enfada con la gente que lo dice por decir blasfemias y cosas así. A todos los que nos gusta hablar del fin inminente y hacer bromas con él, como éste artículo, lo hacemos con dos intenciones: divertirnos y divertir, o al menos ésto sería lo ideal. Espero que haya quedada clara ésta premisa y que luego no os enfadáis con, por ejemplo, vuestro amigo porque está bromeando con que está ahorrando para una arca.

Sin más dilación, paso a las maneras y razones del fin del mundo, por orden de la menos creíble y probable a la más creíble y probable.

Razón 5: Inundación

Seguro que muchos habréis oído a hablar de ésta manera del fin. De hecho, hay una película y todo que ilustra de buena manera éste fin (salvo por el momento en que se salvan algunos y, al final el mundo se salva también). Nos explica que habrá una inundación, algo así como un diluvio, que nos matará a todos. Incluso hay gente que ha buscado soluciones a éste tema: arcas. ¿Y el motivo? Pues se dice que debido al calentamiento global se derretirían los polos (no, los helados no, los polos geográficos), el nivel del mar se elevaría… y el resto se puede imaginar. Ésta teoría es muy poco probable ya que hay el peligro de que puedan haber supervivientes… y ésto ya no sería el fin del mundo.

5% de posibilidades que sea el motivo de el fin del mundo.

Razón 4: Coca-Cola

Estoy seguro que todos conocéis a la Coca-Cola. ¡Sí! Aquella bebida refrescante de color marrón con MUCHO azúcar (un poco menos la light) y MUCHA cafeína (un poco menos, pero seguro que tiene, la sin cafeína). Bien. Lo que no muchos conocéis es el vasto imperio coca-cola-tero. El señor coca-cola tiene miles de sus soldados repartidos por el mundo, camuflados como simples vendedores del cine, y algunas veces incluso los camuflan aún más como vendedores de pepsi (si le quitas mucho azucar a la coca-cola te sale pepsi, por éso ésta tiene un peor sabor).

Pues bien, los Coca-Colateros pretenden dominar el mundo, cambiando la composición química de los océanos para transformarlos en coca-cola, provocando que los peces y otros animales marinos consuman cafeína, se vuelvan hiperactivos y nos maten a todos. Lo que no saben es que también los matarán a ellos. Ésta razón, extendida por muchos bebedores de Pepsi que odian a muerte a la coca-cola (la versión original no tiene el añadido de que la pepsi es más mala que la coca-cola). No es muy creíble ésta teoría tampoco, ya que la sal del agua de los océanos es muy voraz y se la quiere beber toda.

10% de posibilidades de que ocurra

Razón 3: Apagón

El título de ésta razón no es muy descriptivo. De hecho, la razón es muy larga de contar… pero os la contaré muy resumida. (si no sois ateos/agnósticos, leed el párrafo 2 por favor). Resulta que el mundo tal y como lo conocemos es un programa de simulación muy avanzado. Sí. Estamos en un ordenador potentísimo de un laboratorio. El sistema solar es lo único emulado, el resto es un plano con una textura aplicada, y ya está. Y sí, podemos asegurar que la inteligencia artificial está muy desarrollada por ahí.

Bien, a por lo del tema. Resulta que el día 21-12-2012 a las 12:00 del mediodía UTC (en éste mundo, el simulado) termina el plazo del experimento. ¿Qué quiere decir esto? Pues que vendrá un señor muy amable vestido en bata blanca y cerrará el ordenador que está ejecutando el programa de simulación… El resto creo que podéis imaginároslo. Es bastante probable que ésta teoría ocurra, aunque sería mucho suponer que haya un plazo o que éste plazo sea el día de el fin del mundo. Lo que sí es seguro es que estamos dentro del programa de simulación.

15% de posibilidades de que ocurra

Razón 2: Hasefroch

Estoy seguro de que la mayoría conoceréis el poder destructivo de Windows. Los llamados virus creados por los programadores de anti-virus y por los programadores aburridos (el aburrimiento permitió que se idease la bombilla… cosa buena. Pero también permite que se ideen cosas malas). Pues bien. Resulta que se prevé que un programador muy aburrido realice un virus capaz de salir de los ordenadores y empezar a crear el caos completo en todo el mundo.

¿El motivo? El aburrimiento. Así que… ya basta. Quizá el aburrimiento será bueno para descubrir cosas, pero quizá éstas cosas descubiertas… sean malas, como el súper-virus.

El problema al que se enfrenta ésta teoría es a la capacidad de convertir un ente virtual a un ente real. Éste problema se ve solventado cuándo echamos un ojo al mundo en que estamos: un simulador muy potente. Y es que estamos hablando de un super-virus que no tan solo afectará a los ordenadores simulados en el ordenador, si no al simulador en sí! Aquí ya le vemos mucha más viabilidad a nuestra teoría. Pero quizá nos queda otro defecto… la inteligencia artificial necesaria para el virus de manera que sea capaz de causar el caos. Estamos hablando de un ente virtual transformado en un ente material… ¿querrá ésto decir que hereda los métodos definidos para un ente material? Si la respuesta es afirmativa, lo que nos quedaría es que el programador muy aburrido transforme el ente virtual a un ente humano (heredando de ésta manera los métodos de inteligencia artificial humanoides) y que lo configure de manera que no tenga empatía y mucho más para que sea capaz de sembrar el caos.

20% de probabilidades de que ocurra

Razón 1: Zombies

Estoy seguro de que la mayoría de lectores habéis visto películas de Zombies como “Dawn of the dead”, Shawn of the dead”, “Zombieland”, “Resident Evil”, “28 Days Later” y un largo etcétera…

La mayoría de éstas películas terminan en un fin devastador con los Zombies cargándose todo el planeta, es decir, que la mayoría de películas Zombies están claramente relacionadas con  finales apocalípticos.

Pues bien, imaginaros que por alguna desconocida razón (razón que quizá sea contada en otra ocasión… 5 motivos para la zombificación de la especie humana… ¿quien sabe?) la especie humana es zombificada, es decir, que muchos humanos se transforman en zombies. Éstos zombies irían transformando a otros humanos en zombies, provocando una reacción en cadena similar a la que se produce en un reactor nuclear.

Quizá con éste método solo se destruiría a la especie humana, pero… ¿habéis visto aquél documental que explica qué pasaría si los humanos desaparecieran del planeta?- Vale, quizá muchos me discutiréis que ésto no es exactamente “el fin del mundo”, si no “la salvación del mundo” (la eliminación del ser humano supondría un gran alivio para todas las otras especies, de ésto estoy seguro), pero en fin. Lo que sí que sabemos es que ésta es la teoría que más probabilidades tiene de que ocurra, ya que por eso es la que sea peliculizado más veces. ¿Quién sabe lo que quería decir el calendario maya con éste fin tan repentino? Quizá no se refería al fin del mundo si no al de los humanos…

Me gustaría finalizar éste artículo con una gran frase: “¿Quién sabe lo que nos depara el futuro?”

Todos éstos programas nos ofrecen la capacidad de exportar el trabajo realizado en ellos a un formato que pueda leer el parser de tu videojuego: XML, CSV (sequencia de números separados por comas), etc.

Tiled

Tiled

Programa de reación de mapas de tiles bastante sencillo. Consta con, obviamente, una herramienta para colocar los tiles en el mapa, además de una herramienta de capas de tiles, soporte para mapas ortogonales (básicamente, cuadraditos) y isometricos (cuadraditos inclinados para dar un efecto Pseudo-3D), una herramienta de objetos con precisión de píxel (le señalas una área y le dices que es X objeto. No tiene nada más, pero la función de ésta herramienta viene cuándo te montas el parser). Propiedades personalizadas a todos los elementos (capas, objetos, etc.).

Puede exportar el mapa a XML (no es muy difícil parsearlo) o a imagen (definitivamente, la imagen es para mostrar el mapa, no para usarlo en un videojuego como mapa jugable).

Bastante recomendable. Multiplataforma.

Mappy

Mappy

Programa solo disponible para Windows el cual te permite tres tipos de proyecciones: rectangular, hexagonal e isométrica. Posee algunas herramientas de dibujo y finalmente las archi-conocidas capas. Bastante pobre si no fuera porque permite un sistema de plugins para exportar los mapas a cualquier formato que pueda uno pensar.

Tile Studio

Tile Studio

Herramienta de creación de mapas de tiles disponible sólo para los usuarios de Windows y muy completa. Ofrece solo una perspectiva ortogonal, pero muchas herramientas para colocar nuestras tiles e incluso un editor gráfico integrado especializado en dibujar tiles para crearlas. Muy completo. Además, ofrece un sistema que te permite programar el exporte del mapa. Es decir, que puedes exportar un mapa creado en Tile Studio para lo que te dé la gana. Bastante abajo en la página web lo muestran con una tabla llena de aplicaciones en diferentes lenguajes de programación que usan mapas creados en Tile Studio.

The Wasabi Project + Flan

Flan

No, no he puesto éstos dos juntos porque los dos tengan nombre de comida. Los he puesto porque tienen algo en común. Los dos están especializados en realizar mapas para Flixel, librería de la que os hablé en otro artículo. Y es que ofrecen posibilidades bastante suculentas y un sistema de exportación que te genera un código en AS3 directamente para copiar, pegar, y crear tu juego. The Wasabi Project es solo para Windows, mientras que Flan está disponible tanto en el sistema operativo de Microsoft como en Mac OS X (aunque con un par de características menos en el último). Los dos ofrecen scroll de mapa diferente por cada capa, inclusión de objetos ya programados en tu juego Flixel, etc. Para todos los usuarios de Windows recomando 100 veces The Wasabi Project ante Flan. Si usáis Mac OS X, solo os queda el editor con nombre de postre .

¿Y cuál de éstos es el mejor? Yo personalmente escogería…

Si tienes Windows

• En flixel: The Wasabi Project
• Fuera de flixel: Tile Studio

Si tienes Mac

• En flixel: Flan
• Fuera de flixel: Tiled

Si tienes Linux

• Emular los programas recomendados en la sección de Windows con Wine

]]> http://www.barail.es/software/tilemaps/feed/lang/es/ 0 http://www.barail.es/internet/comparativa-de-portales-de-juegos-flash http://www.barail.es/internet/comparativa-de-portales-de-juegos-flash#comments Mon, 01 Mar 2010 23:00:04 +0000 Rolpege http://www.barail.es/?p=457 ¿Quién no ha jugado nunca a cualquier juego flash? Los hay a montones y de todos tipos: plataformas, minijuegos arcade, lucha, etc.

Normalmente éstos juegos flash están presentados en portales que contienen muchos de ellos divididos en categorías, incluyendo buscadores y demás utilidades que pueden servir al jugador y/o usuario del portal.

En éste artículo nos encargaremos de revisar algunos portales flash bastante famosos y finalmente haré una clasificación según mis gustos de ellos:

ArmorGames

Armor Games

ArmorGames es un portal de juegos flash bastante completo. Cuenta con un sistema de perfil dónde puedes poner varias cosas, votar los juegos, favoritearlos e incluso subirlos, high-scores compartidas, buscador… en definitiva: lo que debería ser como mínimo cualquier portal de juegos flash. La novedad de éste es que además de ser un portal de juegos flash es también una compañía desarrolladora de videojuegos flash. ¿Qué quiere decir eso? Que en ArmorGames nos podemos encontrar juegos desarrollados por ArmorGames (aunque están divididos por perfiles: es decir, cada trabajador de ArmorGames tiene sus juegos en su perfil) que algunas veces son exclusivos del portal y otras veces los publican en otros. También cuenta con un blog de desarrollo.

Kongregate

Kongregate

Tiene lo básico que deba tener cualquier portal de juegos flash, es decir, sistema de perfil, votos de juegos, favorites, high-scores, buscador, subir tus juegos, etc. y además cuenta con varias características suculentas para cualquier jugador: achievements. ¿Qué son los achievements? Pues son recompensas que te dan al completar X objetivo de un videojuego. Hay distintos achievements: badges (o medallas que se ponen en tu perfil), challenges (cartas que ganas y puedes usarlas en juegos de cartas del Kongregate), tíckets (achievement que te permite entrar en el sorteo de varias cosas) y medals (recompensas de múltiples objetivos o commemoraciones especiales). Además, ciertos achievements y otras acciones (como votar juegos) te dan puntos que te permiten subir de nivel en Kongregate.

Para los curiosos: Kongregate sabe si has ganado X achievement porque se comunica con el juego flash mediante unas APIs que éste lleva integrado y que son bastante fáciles de usar si eres desarrollador de videojuegos flash.

Miniclip

Miniclip

No tiene mucho de especial. Es una colección de videojuegos flash juntados en una sola página y divididos por categorías. Cuenta con juegos exclusivos que sólo se pueden jugar en la web.

Minijuegos

Minijuegos

Se podría llamar perfectamente como el Miniclip en castellano… si no fuera que recientemente Miniclip está en castellano también. Además de videojuegos flash también cuenta con animaciones flash y chorradas flash.

Newgrounds

Newgrounds

Buscador, categorías, perfil, votación de juegos… ¿os suena? Sí. Es otra vez un portal con lo que todo portal de juegos flash debería tener. Pero éste tiene además de juegos flash animaciones flash e incluso un lugar dónde puedes subir tu música para que los oyentes la critiquen. Además de categorías para cada de éstos tres temas, tiene colecciones especiales que contienen juegos, animaciones y músicas relacionadas con un tema, por ejemplo la colección de ninjas y samurais que reúne animaciones, juegos y músicas de ninjas y samurais.

Nitrome

Nitrome

Ésta web es un caso especial ya que no es exactamente un portal de juegos flash. Es más bien una sola compañía que publica todos sus juegos allí (y algunos en otros portales también). No ofrece muchas características especiales a los usuarios pero tiene unos juegos que están geniales: un pixel-art encantador, buena música y casi-todos una jugabilidad original que seguro que te encanta.

Y ahora… ¡lo prometido es deuda! Un Top 6 según mis gustos de éstos portales:

1. Kongregate
2. ArmorGames
3. Nitrome
4. Newgrounds
5. Miniclip
6. Minijuegos