Desarrollo de interfaces web
  para celulares en PHP
    - Introducción
    - WURFL
    - Tera-WURFL
    - HAWHAW

Christi...
Contenido
•   Fragmentación del dispositivo
•   Lenguaje de marcas
•   WML
•   XHTML – Mobile Profile
•   Tres herramienta...
Fragmentación del
CAUSAS :
                 dispositivo
- Diversidad del
Hardware

- Diversidad del
Software

- Variacione...
WML (Wireless Markup
            Language)
• Lenguaje basado en XML
• Diseñado para pantallas pequeñas, baja
  memoria y c...
WML (Wireless Markup
            Language)
•   Ejemplo:
    <?xml version="1.0"?>
    <!DOCTYPE wml PUBLIC "-//WAPFORUM//D...
WML (Wireless Markup
            Language)
•   Ejemplo:
    <?xml version="1.0"?>
    <!DOCTYPE wml PUBLIC "-//WAPFORUM//D...
XHTML-MP y WCSS
• Usado en mayoría de celulares modernos
• Se crean interfaces más robustas y bonitas
• Maneja el mismo co...
XHTML-MP y WCSS
• Ejemplo
  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile ...
XHTML-MP y WCSS
• Ejemplo
  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile ...
Actualmente
       Tres Herramientas
• WURFL (Wireless Universal Resource )
• Tera-WURFL
• HAWHAW (HTML and WML Hybrid
  A...
WURFL
• Base de datos de dispositivos móviles
  con sus especificaciones y capacidades
• Archivo XML alrededor de 7 Mb o
 ...
WURFL
• Ejemplo
 User Agent : SEC-SGHE950/1.0 NetFront/3.4 Profile/MIDP-2.0
 Configuration/CLDC-1.1

 Una búsqueda a WURFL...
WURFL
• Ejemplo
 User Agent : SEC-SGHE950/1.0 NetFront/3.4 Profile/MIDP-2.0
 Configuration/CLDC-1.1

 Una búsqueda a WURFL...
Tera - WURFL
• Una base de datos mysql conteniendo
  los datos del WURFL.
• Librería que encapsula consultas a la
  base d...
Tera - WURFL
• Ejemplo
 <?php
 require_once “/path/to/tera_wurfl/tera_wurfl.php”;
 $device = new Tera_Wurfl();
 $device-> ...
HAWHAW
• Librería PHP bajo licencia GPL
• Crea objetos PHP representando
  elementos para ser mostrados en la
  página
• L...
HAWHAW
• Ejemplo
 <?php
 require_once “/path/to/hawhaw.inc”;
 $page = new HAW_deck(“Example Page”, HAW_ALIGN_ LEFT);

 $pa...
HAWHAW
• Resultado
  <?php
  require_once “/path/to/hawhaw.inc”;
  $page = new HAW_deck(“Example Page”, HAW_ALIGN_ LEFT);
...
Ejemplo: Agenda cursos - Dokeos
Ejemplo: Agenda cursos - Dokeos
Referencias
•   http://www.w3schools.com/wap/wml_reference.asp
•   http://developer.openwave.com/documentation/xhtml_mp_cs...
Upcoming SlideShare
Loading in …5
×

Desarrollo de interfaces web para celulares en PHP

7,169 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,169
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
156
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Desarrollo de interfaces web para celulares en PHP

  1. 1. Desarrollo de interfaces web para celulares en PHP - Introducción - WURFL - Tera-WURFL - HAWHAW Christian Fasanando Flores Desarrollador PHP
  2. 2. Contenido • Fragmentación del dispositivo • Lenguaje de marcas • WML • XHTML – Mobile Profile • Tres herramientas (WURFL,TERA- WURFL,HAWHAW).
  3. 3. Fragmentación del CAUSAS : dispositivo - Diversidad del Hardware - Diversidad del Software - Variaciones de Versiones - Diversidad de preferencias del usuario - Diversidad de entornos
  4. 4. 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 >
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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/
  9. 9. 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/
  10. 10. Actualmente Tres Herramientas • WURFL (Wireless Universal Resource ) • Tera-WURFL • HAWHAW (HTML and WML Hybrid Adapted Webserver)
  11. 11. 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/
  12. 12. 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”/>
  13. 13. 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”/>
  14. 14. 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/
  15. 15. Tera - WURFL • Ejemplo <?php require_once “/path/to/tera_wurfl/tera_wurfl.php”; $device = new Tera_Wurfl(); $device-> getDeviceCapabilitiesFromAgent ($_SERVER[“HTTP_USER_AGENT”]); demo : http://tw.pointbeing.net/
  16. 16. 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
  17. 17. 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/html plugins : http://www.hawhaw.de/download/plugins/
  18. 18. 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(); Hello World! <?xml version="1.0"?> Next <!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>
  19. 19. Ejemplo: Agenda cursos - Dokeos
  20. 20. Ejemplo: Agenda cursos - Dokeos
  21. 21. 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 ...

×