Si alguna vez os habéis preguntado qué framework o qué gestor de contenidos utilizar, y no habéis llegado a ninguna conclusión quizás es porque lo que realmente necesitéis lo podéis hacer vosotros mismos con un poco de esfuerzo…y digo esto porque lo que necesitamos últimamente en la comunidad de programadores es gente que haga las cosas bien, gente como Pedro Luis, que nos regala el código de una web que tuvo que realizar en su trabajo. Pedro es Ingeniero Informático y le gusta hacer las cosas como un ingeniero debe hacerlas, con base y fundamento jeje
Nuestro amigo ha subido a su directorio lo que véis en el vídeo, el proyecto Inventaria, un motor de sitio web para organizar departamentos de un colegio, la tecnología que utiliza en su pequeño y humilde pero potente framework es: jQuery, PHP, mySQL y XHTML+CSS. Está pensada para que se pueda escalar fácilmente, añadiendo nuevas clases que harán de controladores y vistas…sí, le falta el modelo para completar el círculo del patrón MVC pero, quién necesita realmente un modelo cuando tienes el gestor de plantilla Smarty?… puede hacer el controlador y la comunicación con este sistema de plantillas de modelo al mismo tiempo? efectivamente, y así es como nuestro querido amigo Pedro lo ha pensado y ahora, sigamos viendo algo de código.
La estructura del sitio es algo que ya hemos visto en otros frameworks más famosos, primero tiene un index.php y por medio de un fichero .htaccess , redirige todas las peticiones menos multimedia a este script, que simplemente se conecta a la base de datos y renderiza la vista que la acción de la URL especifica, algo que todos conocemos:
//Extract Controller, Action and parameters from URL $query = $_SERVER['QUERY_STRING']; $request = explode('/', $query); $controller = (!empty($request[1])) ? $request[1] : 'main'; $action = (!empty($request[2])) ? $request[2] : 'index';
y Pedro lo hace de forma muy inteligente y compactada, como véis es código que se entiende a la primera incluso las condiciones anidadas en una única línea. El motor o núcleo es tan sencillo que entra en esas menos de 100 líneas, un resultado de una acción se guarda directamente filtrado y procesado mediante el uso a la llamada de un controlador asociado creado en la variable $instance, que es la instancia de la clase perteneciente al controlador que la URL especifica…
include('controllers/'.$controller.'.php'); $instance = new $controller; $result = call_user_func(array($instance, $action), $params); $view = $result['view']; $data = $result['data']; render_view($view, $data);
aquí podéis ver que se carga el controlador, se crea la instancia de la clase y se procesa el resultado para llamar seguidamente al renderizador de la vista, que podría ser,al mismo tiempo cualquier otra clase, pero en este caso es smarty y cerramos el ciclo del patrón Modelo – Vista – Controlador de una de las maneras más simples que he visto en estos días jeje
Si profundizamos en el Controlador, veremos que implementa sólo dos, el encargado de la página principal y el que maneja las materias del departamento del colegio, y funciona casi como una capa por encima de la clase de la base de datos, es decir, hace las consultas de listados, modificaciones, inserciones o borrados fáciles sólo pensando un poquito.
Para instalarlo sólo hay que crear una base de datos ,poner los valores de configuración en index.php e install.php, que por simplicidad ni siquiera se ha creado un config.php jaja, y lanzamos este install.php, tras lo que podemos cargar la web en el navegador.
Para probar este software directamente en mi PC me he bajado el maravilloso paquete de MoWeS (Servidor Apache2+mysql5+php5+image-magick+phpmyadmin en 23MB), he descomprimido Inventaria en el directorio www/inv de MoWeS, después he creado una base de datos con juego de caracteres UTF8 con una instrucción sencilla en phpmyadmin:
CREATE DATABASE `inventaria` DEFAULT CHARACTER SET utf8 COLLATE utf8_bin;
y he puestos los datos de configuración en index.php e install.php
$host = 'localhost'; $dbname = 'inventaria'; $dbuser = 'root'; $dbpass = '';
para lanzar localhost/inv/install.php ,lo que me devuelve:
Creating departments data table...OK Creating materials data table...OK Creating constraints...OK Creating departments data --------------------------- Creating Religión table...OK Creating Plástica table...OK Creating Ciencias Sociales table...OK Creating Tecnología table...OK Creating Francés table...OK Creating Latín table...OK Creating Música table...OK Creating Gestión Administrativa table...OK Creating Física y Química table...OK Creating Educación Física table...OK Creating Biología y Geología table...OK Creating Filosofía table...OK Creating Orientación table...OK Creating Matemáticas table...OK Creating Lengua table...OK Creating Inglés table...OK
con lo cual, ya tenemos todo, ya podemos entrar en localhost/inv/. Si queremos cambiar el directorio inv por cualquier otro sólo tendríamos que cambiar las referencias en las plantillas de inv al nuevo nombre, por ejemplo, “inventaria”.
A partir de aquí ,es tarea del lector avanzar el proyecto y enfocarlo hacia una web que trate de manzanas, cómics, o por qué no? una tienda o cualquier otra cosa!
Ya no tenéis excusa para hacer las cosas bien desde cero, tenéis el conocimiento en vuestras manos, usadlo sabiamente :)
Mención especial a Pedro por compartir con nosotros su código, gracias!
Hoy en día tenemos millones de opciones a la hora de crear una tienda, hoy estudiaremos el caso de utilizar Joomla y una solución a medida como es “VirtueMart” o “Tienda”.
Desde los primeros arbores del gestor de contenidos Joomla, cuando era Mambo, todo era un poco confuso, cada uno tenía que escribir muchos módulos y extensiones para tener un soporte decente multilenguaje y con e-commerce, pero actualmente toda esa confusión se ha disipado, hemos vuelto a poder dedicarnos a disfrutar del montaje de una tienda en unos cuantos clicks y ,ajustando un par de parámetros, solucionando pequeños bugs, desarrollamos un portal, catálogo y cesta de la compra con pasarela de banco incluída de una manera profesional.
A petición de 7p he eliminado el vídeo porque el cliente no deseaba comprometer su información.
Substituyo el vídeo de la presentación de la web y las modificaciones que hice por un par de vídeos que muestran la tecnología usada en este encargo.
Cómo usar VirtueMart con Joomla:
Tutorial:
El encargo en este caso tenía que ver con texto a formatear, algún algoritmo que escribir sencillo…Lo más importante y lo que más prisa le corría al cliente era el formato del carro de la compra, algunos botones, textos, estilos css, etc. y sobre todo que funcionaran los impuestos correctamente, que en España se cobrara el IVA para todas las provincias menos para Ceuta, Melilla, etc. Además la tienda tenía el bug de virtuemart de paypal, todo corregido en apenas unos días.También se hicieron algunas optimizaciones del código y bugs.Por ejemplo en la parte de productos, antes de añadirlos a la cesta el cliente pidió que cuando un producto tuviera hijos que no comprobara el stock hasta seleccionar uno de ellos y si no tenía hijos sí.

- Multitarea: mientras ejecutamos una aplicación, al pulsar el botón “home” no se cierra sino que pasa a segundo plano, pueden continuar ejecutándose o pueden suspenderse
- Notificaciones Locales: completa el sistema de notificaciones push (desde un servidor remoto que nosotros mismos podemos crear)
- Core Motion: conjunto de interfaces para acceder a toda la información basada en el movimiento (giroscopio ,motion-based)
- Data protection: sistema integrado de encriptación
- Soporte para pantalla de alta resolución (adaptación a la antigua)
Recordar que no todos los tipos de aplicaciones pueden ser universales (para cualquier iDevice) y las que lo son tienen diferentes diseños de interfaces de usuario en subdirectorios con su nombre.

@interface Persona : NSObject { NSString *nombre; NSString *apellidos; } -(NSString*) nombre; -(NSString*) apellidos;-(void) setNombre: (NSString *) _Nombre; -(void) setApellidos: (NSString *) _Apellidos; +(NSString *) soyMetodoEstatico: (NSString *) mensaje; @end
Ejemplo de clase Persona.m:
#import "Persona.h" @implementation Persona -(NSString*) nombre { return self.nombre; } -(NSString*) apellidos { return self.apellidos; } -(void) setNombre: (NSString *) _Nombre { self.nombre = _Nombre; } -(void) setApellidos: (NSString *) _Apellidos{ self.apellidos = _Apellidos; } +(NSString) soyMetodoEstatico: (NSString *) mensaje{ return mensaje; } @end
- (id) init { if ( self = [super init] ) { [self setNombre:@"nombre por defecto"]; [self setApellidos:@"apellidos por defecto"]; } return self; }
self es la propia instancia del objeto y super es la clase de la que hereda

[object method];
Con entrada:
[object methodWithInput:input];
Con salida:
output = [object methodWithOutput];
Con entrada y salida:
output = [object methodWithInputAndOutput:input];

- (int) multiplica: (int)a por:(int)b { return a * b; } - (NSString *) cadenaResultado: (int)resultado { NSString *res = [NSString stringWithFormat:@"El resultado es: %d", resultado]; return res; } int resultado = [self multiplica:2 por:3]; NSString *cadena = [self cadenaResultado:resultado]; NSLog(@"%@", cadena); //devuelve 6
@protocol MyProtocol - (void)requiredMethod; @optional - (void)anOptionalMethod; - (void)anotherOptionalMethod; @required - (void)anotherRequiredMethod; @end @interface ClassName : ItsSuperclass < protocol list >
NSLog(@”La fecha y hora actual es %@”, [NSDatedate );
Diseñar como un ingeniero y producir como un artista: echad mano de vuestro amigo el arquitecto de información para encontrar la mejor manera para guardar los datos,… no es lo mismo una base de datos en SQLite que un conjunto de ficheros XML.
Otros tutoriales para conocer el IDE XCode 3: nos sirve para empezar.
Ahora que conocemos el IDE de la mano de Noemi gracias a sus tutoriales de Youtube, vamos a seguir un poco más adelante, tenemos la ayuda necesitamos aquí:
Para corregirlo podéis enviármelo con el formulario de contacto.
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?
Hace unos meses preparé una charla para la Universidad que al final no impartí por falta de tiempo, ahora os traigo todo el material para que lo utilicéis cómodamente en vuestros blogs y adaptaciones de manera muy sencilla.
Se trata de la construcción de un complejo entramado de fuentes de información que, combinadas, constituyen todo un generador de contenido fresco,afín e interesante para nuestro sitio web.
Primero crearemos un pipe en el sitio web de Yahoo! Pipes, después utilizaremos su RSS para obtener el contenido que genera y después ,usando el plugin que pongo a disposición en este mismo post, tomaremos la fuente de datos final para procesarla y añadir contenido único dinámico a nuestro blog de WordPress.
El siguiente PDF contiene todo el proceso:
Por si no queda suficientemente claro, he realizado el siguiente vídeo para mostrar el funcionamiento:
Resumen de los pasos:
El plugin se puede descargar aquí: Yahoo! Pipe News Plugin for WordPress by Juan Belón. Recordar dar permisos de escritura al subdirectorio de pipenews/cache para que funcione ;)
Disfrutad :)
Este vídeo muestra un ejemplo de aplicación web que se comunica mediante AJAX con un programa del servidor en perl para procesamiento de facturas telefónicas en PDF dando como resultado un filtrado de datos, con la mejor opción de ahorro de las compañías de móviles…