Videojuego desarrollado en AS3: Flash + PHP + MySQL + XHTML + jQuery

Como algunos ya sabréis, me dedico al desarrollo videojuegos para cualquier plataforma, éste fué uno de los proyectos que un cliente ( makro.es ) me pidió hace un tiempo.

Se trata de un videojuego tipo Trivial Pursuit con los gráficos de Joan Carles Muñoz, desarrollado durante dos semanas, consiste en una serie de preguntas que pueden definirse fácilmente y sólo una de ellas es correcta. Trae soporte de login usando una conexión a un servidor Apache con PHP y MySQL y en varios lenguajes, en este caso portugués y español. Las preguntas son aleatorias, aunque no hay límite de tiempo, se compite por empezar y acabar antes que nadie así como tener el menor número de fallos posible.

Vídeo:

Está todo hecho de cero, desde los textos hasta los botones pasando por las animaciones, que son interpolaciones hechas con con tweeners.

Cuando un usuario hace el login, se guarda la hora de inicio de la partida, después, al conseguir todos los quesitos, se guarda la información generada: fallos, tiempos, etc.,así como se calcula el mejor tiempo conseguido. Todo va a la base de datos MySQL que se presenta a los encargados de la administración como un listado de personas con sus datos correspondientes, ordenado por los mejores tiempos de partida, esta parte fué elaborada usando jQuery así como las plantillas en XHTML+CSS3.

Estos datos pueden ser exportados como CSV en modo texto para ser importados y tratados posteriormente en programas de análisis de datos como puede ser Microsoft Excel, permitiendo así analizar las partidas de los usuarios y hacer gráficos con ellos.

La parte más complicada fué ,quizás, la de los estados del juego y las firmas de seguridad incluídas usando encriptación en ambas partes, cliente y servidor. En cualquier caso, fué un desarrollo bastante entretenido.

Aplicaciones web multiplataforma con XSL y XML: un reto SEO

Gracias al uso de XSL vamos a transformar un XML para lo que nos convenga.

Lo primero, la utilidad, una aplicación en PHP o Java o cualquier otro lenguaje, como por ejemplo un juego o un TPV, una tienda, un portal…, cualquier tipo de aplicación puede compartir datos como hemos visto en los cursos y talleres de servicios web, pero podemos avanzar un poco más: si comprendemos el uso de una plantilla XSLT que transforme un fichero XML, siendo este la salida de nuestra aplicación, en un fichero XHTML que el navegador interpreta, sea en un móvil, un ordenador de escritorio o cualquier otro formato que necesitemos…entonces, las posibilidades son ilimitadas.

Para nosotros como webmasters, programadores, diseñadores…, un XSLT es un fichero que sirve para dar formato HTML a un fichero XML.
http://es.wikipedia.org/wiki/Extensible_Stylesheet_Language_Transformations
¿Cómo?
En español, si abres un fichero .XML con el navegador, éste lee la cabecera buscando de qué manera interpretarlo, aquí entra en juego el esquema XSLT, donde la T es de template, o sea, plantilla, en nuestro caso, una plantilla XHTML.
Bueno, vamos a los ejemplos, éste en concreto es de la W3C:
http://www.w3schools.com/xml/simplexsl.xml
como ves, es una dirección .XML que interpreta el navegador, incluso el IE6 :-).
Esto lo hace gracias a que en la cabecera aparece:

<?xml-stylesheet type=”text/xsl” href=”simple.xsl” ?>
entonces, usa la hoja de estilos o plantilla para dar formato que está en la misma dirección pero con distinta extensión:
http://www.w3schools.com/xml/simple.xsl
como ves, este fichero se basa en un esquema de TRANSFORMACIÓN

, lo que quiere decir que va a tomar el contenido del fichero inicial .XML y usando las reglas del XSL va a convertir las etiquetas con nombres comunes, en el ejemplo, son elementos del desayuno, ej.) “<breakfast_menu>” , en divisiones del tipo:
——-
<div style=”..”>
<span>
<!–etc.–>
</span>
</div>
——-
En concreto, esta regla es :
________________________________
<xsl:for-each select=”breakfast_menu/food”>
[CODIGO XHTML]
</xsl:for-each>
________________________________
para extraer los valores de un elemento de un nodo xml, se utiliza <xsl:value-of select=”RUTA/NOMBRE_NODO”/>
que es lo que se utiliza en el ejemplo para el precio, nodo <price> (que está dentro de <food>, que está dentro del menú <breakfast_menu>, que es la raíz o root del documento).
Para mostrar el valor de un atributo, por ejemplo,si a cada nodo <price> le añadimos la moneda:
<price currency=”dollar”>8.50</price>
en la plantilla xslt ,el valor se sacaría, así:
<xsl:value-of select=”price/@currency”/>
ya que estamos dentro de un bucle (o loop) que recorre todos los elementos del tipo
breakfast_menu/food
es decir, todos los <food>, dentro tienen un <price> y sacamos el atributo currency con la @.

La lista completa de referencias de XSL con templates está en:
http://www.w3schools.com/XSL/xsl_w3celementref.asp

Este es un ejemplo sencillo porque no incluye ningún DTD o definición de datos (en lenguaje XTiger), este se suele utilizar para hacer las cosas bien como ingenieros, …este DTD es un fichero que está por debajo del XML y es el que determina cómo se debe construir el árbol DOM completo, es decir, si no se siguen las reglas del DTD base, el fichero XML no es válido. Pero esto ya es pa nota jeje…hace unos años escribí un generador de código php+xhtml+jscript+css en php-gtk que creaba el esqueleto de una web en función a un xml ,el vídeo está aquí:

Resumiendo, podemos tener una aplicación que genere el mismo código XML para todas las plataformas pero cambiando sólo el esquema XSLT le diremos a la aplicación final que interpreta dicho XML cómo ha de hacerlo. Para el caso de móviles utilizaremos su lenguaje propio, al igual que si fuera una aplicación externa que necesitamos conectar/adaptar con nuestra aplicación, pudiendo usar servicios web como ya vimos en otros tutoriales si necesitamos algo más avanzado.

Para editar XSLT tienes editores a patadas :] ( Amaya )

Más tutoriales:

y más cosas habrá por ahi…

¿Quién está usando XML y XSLT hoy en día?: Blizzard lo utilizó en su primera versión de su web de Starcraft 2 ( XML , XSL -en este caso usan un script PHP que define el idioma y lo coloca en el atributo lang que se interpreta en la plantilla XSL- ), supongo que mantenía una base de datos interna en la empresa y quería reutilizarla por lo que le dió una salida xml y creó un esquema xslt bastante chulo, no me extrañaría que fuera la misma aplicación que usaran para gestionar el trabajo de los empleados… Otras empresas lo utilizan, Microsoft para su Office, OpenOffice también,…las universidades quieren pasar todo a XML, en Sun, digo, Oracle, todo se quiere hacer en función a XML para poder traspasar todas las fronteras y si no pueden usar un xslt para transformar de un lado a otro con facilidad.

Las ventajas de usar XML como código fuente es que podremos ocultar un poco mejor el XHTML final de posibles plagios e intentos de ataque, la información mostrada es muy fácil de leer, esto es bueno para la web semántica (web 3.0!), bueno para el posicionamiento (SEO),claro, de hecho Google anunció que una página en XML y XSLT iría a la cabeza antes que otra en XHTML, las arañas, webbots ,spiders, como queráis llamarlas, graban mejor información en XML y hacen las transformaciones a XHTML…además es un buen reto construir una web en XML,

¿O no?

 

Servicios de análisis de rendimiento de webs y validación de W3C

Realizo servicios de formateo de código XHTML embebido en PHP arreglando todos los errores que lance el validador de la W3C tanto XHTML como su CSS asociado así como Scripts de JAVASCRIPT y optimizo el SQL para que las consultas sean más rápidas.

Además hago un análisis del rendimiento y posicionamiento general de un sitio, analizando todas las condiciones de carga extrema, compruebo que la información esté bien estructurada y que la jerarquía del árbol DOM sea fácilmente indexable. Compruebo que los apartados clave para posicionamiento (SEO) estén bien colocados.

En este vídeo muestro cómo se van arreglando los errores de un sitio web con OsCommerce, cuya plantilla ha sido construida a base de tablas, para arreglar un error de validación del HTML con el validador de la W3C hace falta modificar tanto el código PHP como el HTML así como la configuración de la tienda y de los módulos instalados, poco a poco se van solucionando errores como la falta de comillas o atributos caducados en etiquetas HTML, para ello hago uso de búsquedas en ficheros con expresiones regulares, las cuales son del tipo

  • Reglas para buscar atributos sin comillas dobles!
    (width|height)(\=)[0-9]
    (align)(\=)([a-zA-Z0-9])
  • Atributos caducados
    <table(.*)height
  • Regla “NET-enabling start-tag requires SHORTTAG YES”:
    (<br \/>)|(<br\/>)
    o bien
    <br (.*)\/>

Gracias a estas reglas solucionaremos cientos de errores en más de dos docenas de ficheros PHP.

Componente de Firefox para diseñadores y maquetadores Web: Pixel Perfect

Estos son algunos de los diseños en XHTML+CSS que existen actualmente en la red y que se basan en el correcto posicionamiento del arte gráfico usando un esquema de divisiones o cajas que enmarcan el resultado final…

Supongo que muchas veces os preguntaréis cómo diseñan estos genios sus páginas web, (mirad estos 35 excelentes diseños de webs e-commerce) no nos hace falta Flash realmente, sino que usando XHTML y CSS se pueden crear maravillas, ya lo estáis viendo.

Sin embargo, la tediosa tarea de colocar cada imagen en su sitio dentro de una división, cada fondo en el renglón adecuado y el pixel colocado en el milímetro ideal…es una tarea de titanes!, pero para eso amigos tenemos la herramienta Pixel Perfect…para colocar perfectamente los gráficos dentro de nuestra estructura y a mano :)

Y para muestra, un vídeo:

Para instalar esta extensión de Firefox sólo hay que pinchar aquí. (Debes tener Firebug instalado)

Para usarlo: Vamos a nuestra web, pulsamos F12 o sobre el icono de Pixel Perfect

y añadimos una capa con “Add overlay” que será la imagen que necesitamos colocar mediante valores CSS.

Por ejemplo:

Ahora podemos colocar la imagen que hemos añadido gráficamente, para obtener el HTML+CSS correspondiente a esta colocación pinchamos en la pestaña “HTML” y buscamos el objeto añadido dinámicamente o bien pulsamos en “Inspeccionar” y luego en la capa con la imagen superpuesta de modo que podemos copiar fácilmente el código creado por el generador de la extensión.

Felices modificaciones CSS :D

Aplicación web para inmobiliarias – proyectos y multimedia

Esta es una aplicación multilenguaje del año 2007 con zenphp. Se incluye un administrador interno con capacidad para subir ficheros e imágenes asociados a los inmuebles así como enviar direcciones de youtube para insertar conjuntamente con la descripción de aquellos.
Las cabeceras se pueden cambiar por cada entrada de inmueble de cada categoría, además ,las plantillas contienen un gestor de imágenes con las que se construye una galería con fotografías dentro de la página de cada inmueble…

Las plantillas XHTML + CSS se crearon por Agencia Q4 en el 2007.

Aplicación Web para restaurante con guarderia – Platos y Noticias

En el año 2007 se realizó la programación de esta web se hizo con el prototipo 0.1.2.7 de zenphp, las plantillas XHTML + CSS son validadas por la herramienta de la W3C.
Mediante la ayuda de la administración interna es posible editar el contenido de la base de datos que se muestra en el cliente.
Se realizan validaciones para formularios en AJAX, en cuanto a la administración, además se permite la creación rápida de categorías para platos, y otros parámetros avanzados, etc.

Las plantillas XHTML + CSS se crearon por Agencia Q4 en el 2007.



Ver en Youtube

Página 1 de 212
footer
jbelon © | sitemap.xml