Desarrollo de interfaces web para celulares en PHP
21
Desarrollo de interfaces web para celulares en PHP - Introducción - WURFL - Tera-WURFL - HAWHAW Christian Fasanando Flores Desarrollador PHP
Transcript of Desarrollo de interfaces web para celulares en PHP
Desarrollo de interfaces web para celulares en PHP
- Introducción- WURFL- Tera-WURFL- HAWHAW
Christian Fasanando FloresDesarrollador PHP
Contenido
• Fragmentación del dispositivo• Lenguaje de marcas• WML• XHTML – Mobile Profile• Tres herramientas (WURFL,TERA-
WURFL,HAWHAW).
Fragmentación del dispositivo
CAUSAS :
- Diversidad del Hardware
- Diversidad del Software
- Variaciones de Versiones
- Diversidad de preferencias del usuario
- Diversidad de entornos
WML (Wireless Markup Language)
• Lenguaje basado en XML • Diseñado para pantallas pequeñas, baja
memoria y conexión internet lenta.• Conjunto pequeño de tags : <card>, <b>,
<i>, <u>, <anchor></a>, <do><prev >
WML (Wireless Markup Language)
• Ejemplo:<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="no1" title="Card 1"> <p>Hello World!</p></card><card id="no2" title="Card 2"> <p>Welcome to our WAP Tutorial!</p></card></wml>
Referecias : http://www.w3schools.com/wap/wml_reference.asp
WML (Wireless Markup Language)
• Ejemplo:<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="no1" title="Card 1"> <p>Hello World!</p></card><card id="no2" title="Card 2"> <p>Welcome to our WAP Tutorial!</p></card></wml>
Referecias : http://www.w3schools.com/wap/wml_reference.asp
XHTML-MP y WCSS
• Usado en mayoría de celulares modernos• Se crean interfaces más robustas y bonitas• Maneja el mismo concepto de WML pero
basados en etiquetas XHTML estándar• WCSS se encarga del look and feel de la
página• WCSS : -wap-accesskey, -wap-input
format, display: -wap-marquee
XHTML-MP y WCSS
• Ejemplo<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><title>Hello</title></head> <body> <p>Hello <a href="http://example.org/">world</a>.</p> </body></html>
http://developer.openwave.com/documentation/xhtml_mp_css_reference/
XHTML-MP y WCSS
• Ejemplo<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><title>Hello</title></head> <body> <p>Hello <a href="http://example.org/">world</a>.</p> </body></html>
http://developer.openwave.com/documentation/xhtml_mp_css_reference/
ActualmenteTres Herramientas
• WURFL (Wireless Universal Resource )• Tera-WURFL • HAWHAW (HTML and WML Hybrid
Adapted Webserver)
WURFL• Base de datos de dispositivos móviles
con sus especificaciones y capacidades• Archivo XML alrededor de 7 Mb o
150000 líneas aprox.• Se obtiene información por el HTTP
User_agent header.
• http://wurfl.sourceforge.net/
WURFL
• Ejemplo User Agent : SEC-SGHE950/1.0 NetFront/3.4 Profile/MIDP-2.0
Configuration/CLDC-1.1
Una búsqueda a WURFL para este dispositivo encuentra lo siguiente :
<device user_agent=“SEC-SGHE950/1.0 NetFront/3.4
Profile/MIDP-2.0 Configuration/CLDC-1.1” fall_back=“samsung_sgh_e950_ver1” id=“samsung_sgh_e950_ver1_sub1”/>
WURFL
• Ejemplo User Agent : SEC-SGHE950/1.0 NetFront/3.4 Profile/MIDP-2.0
Configuration/CLDC-1.1
Una búsqueda a WURFL para este dispositivo encuentra lo siguiente :
<device user_agent=“SEC-SGHE950/1.0 NetFront/3.4
Profile/MIDP-2.0 Configuration/CLDC-1.1” fall_back=“samsung_sgh_e950_ver1” id=“samsung_sgh_e950_ver1_sub1”/>
Tera - WURFL
• Una base de datos mysql conteniendo los datos del WURFL.
• Librería que encapsula consultas a la base de datos en objetos.
• Interfaz web el cual importa la última versión WURFL a tu base de datos local
• http://www.tera-wurfl.com/
Tera - WURFL
• Ejemplo<?phprequire_once “/path/to/tera_wurfl/tera_wurfl.php”;$device = new Tera_Wurfl();$device-> getDeviceCapabilitiesFromAgent ($_SERVER[“HTTP_USER_AGENT”]);
demo : http://tw.pointbeing.net/
HAWHAW
• Librería PHP bajo licencia GPL• Crea objetos PHP representando
elementos para ser mostrados en la página
• Lenguajes de marcas : WML , XHTML-MP, i-Mode cHTML, HDML y VoiceXML.
• http://www.hawhaw.de
HAWHAW
• Ejemplo<?php require_once “/path/to/hawhaw.inc”; $page = new HAW_deck(“Example Page”, HAW_ALIGN_ LEFT); $page->add_text( new HAW_text(“Hello World!”) );$page->create_page();
referencia de clase : http://www.hawhaw.de/ref/php/htmlplugins : http://www.hawhaw.de/download/plugins/
HAWHAW• Resultado
<?php
require_once “/path/to/hawhaw.inc”;
$page = new HAW_deck(“Example Page”, HAW_ALIGN_ LEFT);
$page->add_text( new HAW_text(“Hello World!”) );
$page->create_page();
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="card1" title="Card 1">
<p>Hello World!</p>
</card>
</wml>
Hello World!
Next
Ejemplo: Agenda cursos - Dokeos
Ejemplo: Agenda cursos - Dokeos
Referencias
• http://www.w3schools.com/wap/wml_reference.asp• http://developer.openwave.com/documentation/xhtml_mp_css_reference/• http://wurfl.sourceforge.net/• http://www.tera-wurfl.com/• http://www.hawhaw.de• http://www.hawhaw.de/ref/php/html• http://www.hawhaw.de/download/plugins/• http://dokeoslatinoamerica.wordpress.com/2009/07/03/dokeos-
movil/
Gracias ...
