¿Cómo crear página WAP?

Tutorial de Ayuda de Páginas WAP



La creacion de una pagina WAP se puede hacer en cualquier editor de texto, si bien, hay editores y herramientas especiales para este fin, con ellas es mucho mas facil realizar el trabajo ya que nos permiten ver direcamente en un emulador en nuestro propio ordenador la forma en la que se ejecutara la pagina.



Alguna de las herramientas mas conocidas para la creacion de paginas en formato WML son el Waptor o el Dotwap entre otras, con ello sera suficiente para crear una pagina a tu gusto.





Si prefieres algo mas completo exiten los kits de desarrollo de los fabricantes, Nokia, Motorola, etc... estos los puedes descargar desde las paginas web de los respectivos fabricantes para lo cual tendras que registrarte.



Para alojar tus paginas WAP solo es necesario disponer de un servidor que tenga adaptados sus MIME TYPES a este tipo de tecnologia, de hecho se puede hacer en cualquier servidor, siempre y cuando este configurado para este fin.





Las siglas WML corresponden a Wireless Markup Language, este es el leguaje que se utiliza para crear paginas WAP que posteriormente se podran cargar en telefonos moviles o navegadores adapatados para este fin.



El lenguaje WML guarda gran similitud con el HTML (lenguaje para la creacion de paginas para internet). El WML se compone por etiquetas.



Una de las principales caracteristicas del WML es la forma en la que estructura sus paginas, estas se agrupan en cartas que a su vez forman barajas, profundizaremos mas en este punto en la parte correspondiente de este tutorial.



El WML ademas permite la inclusion de imagenes y tambien el manejo de variables y formularios asi como trabajar con lenguajes de script



Las paginas creadas en WML llevan extension .wml, los scripts wmls y los graficos wbmp



Cabecera de una Página Wap



Lo primero que debemos introducir para crear una pagina WML es el encabezado, este define la version que usamos y siempre debe de ser lo primero que tenga una pagina WML



Ejemplo:



Cabecera





<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">



Una vez creada la cabecera procederemos a introducir el codigo de la pagina entre los tags <wml> y </wml>, la pagina creada entre estos tags sera llamada baraja (que es como se conocen las paginas creadas en wml) y a su vez esta baraja ira dividia en cartas que estaran comprendidas entre los tags <card> y </card>







Baraja con dos cartas



<?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="numero1" title="Carta 1">



Esta es la carta numero 1</p>

</card>

<card id="numero2" title="Carta 2">



Esta es la carta numero 2</p>

</card>



</wml>







Otro modo de crear enlaces entre las cartas que forman una baraja seria utilizando las etiquetas <do> y <go> de la forma siguiente:



Ejemplo:



Enlaces entre cartas



<?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="numero1" title="Carta 1">



<do type="accept" label="Next">

<go href="#numero2"/>

</do>





Esta es la carta numero 1</p>

</card>

<card id="numero2" title="Carta 2">





Esta es la carta numero 2</p>

</card>

</wml>







De esta forma, como se puede ver en el ejemplo, se pasaria de una carta a otra pulsando sobre el boton donde aparece la inscripcion "next" y retornando a las cartas anteriores con la opcion "back"







Al igual que en codigo HTML tambien podemos crear links bien desde un texto determinado o bien desde una imagen, para esto se utiliza la etiqueta <a>



Seguidamente vamos a ver un ejemplo con la etiqueta <a>...</a>

Tabla



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="enlace" title="enlace">





Pagina de link

</p>

</card>

</wml>











Los Textos



Los textos deben de ir comprendidos entre los tags

y </p>, para los saltos de linea se utiliza la etiqueta




El tag

puede llevar los siguientes atributos:







ATRIBUTOS



DESCRIPCIÓN





SINTÁXIS

left



Alineacion de texto a la izquierda





<p align="left">

center



Alineacion de texto al centro





<p align="center">

right



Alineacion de texto a la derecha





<p align="right">





Ejemplo:



Alineacion texto





<?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="numero1" title="Carta 1">

<p align="left">izquierda</p>




<p align="center"> centro</p>




</card>



</wml>





Existen determinados caracteres que no puden escribirse de forma directa, a continuacion detallamos los codigos de los mas usuales:



Ejemplo:



Caracter





Codigo

á &#xE1;

é &#xE9;

í &#xED;

ó &#xF3;

ú &#xFA;

ç &#xE7;

Ñ Ñ

ñ ñ

< <

> >

& &

" &quot;

nbsp &#160







Las etiquetas para el formato de texto son las siguientes:



Tags





Formato

... Negrita

... Cursiva

... Enfasis

<u>...</u> Subrayado

... Mucho enfasis

<big>...</big> Fuente grande

... Fuente pequeña





Formatos de texto



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="numero1" title="Carta 1">



normal




negrita




cursiva




<u>subrayada</u>




enfasis




<big>grande</big>




pequeña</p>



</card>



</wml>





Creación de Formularios



En el lenguaje WML tambien existe la posibilidad de crear formularios con entrada de datos, seleccion, opciones, etc...



En el ejemplo siguiente trabajamos con el tag <input>, con este tags hacemos posible la creacion de campos para entradas de datos.

Tabla



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 title="Entrada datos">





dato1: <input name="dato1" size="15"/>


dato2: <input name="dato2" size="15" />


dato3: <input name="dato3" size="15"/>

</p>

</card>

</wml>



El tag <option> permite escoger entre varias opciones como se puede ver en el siguiente ejemplo.



Tabla



?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Entrada datos">





<select>

<option value="opcion1">opcion1</option>

<option value="opcion2">opcion2</option>

<option value="opcion3">opcion3</option>

</select>

</p>

</card>

</wml>





Los Tags de una Página Wap : Tag <a>...</a>



<a> enalza a una ruta o pagina especificada



atributo





Descripcion

title



Etiqueta que es asignada al link

href



Direccion de la pagina a la que se quiere enlazar



Ejemplo de Sintasis



Title:



ENLACE



href:



ENLACE



Tag <access>...</access>



<access> crea un acceso restringido a un directorio especificado

atributo



Descripcion



Valores

domain Nobre dado a la carte y usado pra referirse a ella



href

path Titulo de la carta que aparece en pantalla al cargarse la misma



Ruta:



En el siguiente ejemplo podriamos acceder al directorio www.softdownload.com.ar/directorio y a todos los subdirectorios que cuelguen de este (ej: www.softdownload.com.ar/directorio/ruta1).



Ejemplo de Sintasis



<access domain="www.softdownload.com.ar" path="/directorio">



Tag <card>...</card>



<card> crea una carta



atributo



Descripcion





Valores

id Nobre dado a la carte y usado pra referirse a ella



Texto

title Titulo de la carta que aparece en pantalla al cargarse la misma



Texto

onenterforward Direccion a la que se va a ir al ejecutar un tag <go>



URL u otra carta

onenterbackward Direccion a la que se va a ir al ejecutar un tag <prev>



URL u otra carta

newcontext Borra el historial del navegador y resetea todas las variables al ejecutar un tag <go>



true



false

ontimer Direccion a la que se va a ir cuando termine el contador



URL u otra carta



Ejemplo de Sintasis



onenterforward



<card id="Carta 1" onenterforward=

"http://wap.dominio.com/otracarta.wml">



newcontext



<card id="Carta 1" newcontext="true">



Tag <do>...</do>



<do> genera vinculos a otras cartas



Descripcion





Valores

name Nobre dado al objeto y usado pra referirse a ella



texto

type Indica el tipo de evento que se va a realizar



Accept: acepta la opcion asignada



Prev: va a la pagina anterior



Help: abre el menu de ayuda



Reset: limpia los campos de datos



Options: abre el menu de opciones



Delete: Borra un elemento

label Texto que aparece en pantalla al ejecutar la orden

path Titulo de la carta que aparece en pantalla al cargarse la misma



ruta



Un tag <do> puede incluir los tags <go>, <prev>, <noop> y <refresh>

Ejemplo de Sintasis



name



<do type="acceptar" name="enlace 1"><go href="http://www.dominio.com/"/></do>



type



<do type="acceptar" name="enlace 1" label="vinculo a hispaphone"> <go href="http://www.softdownload.com.ar/"/></do>











Tag <go>...</go>







<go> ejecuta un vinculo hacia otras cartas de la baraja u otra URL



Descripcion





Valores

href Direccion a la que se quiere ir



URL u otra carta

method Envia datos al servidor



post / get



Un tag <do> puede incluir los tags <go>, <prev>, <noop> y <refresh>

Ejemplo de Sintasis



href



<do type="acceptar" label="vinculo 1"><go href="http://www.softdownlaod.com.ar/"/></do>



Tag <img>...</img>



<img> introduce una imagen en una pagina WML



Descripcion





Valores

src Direccion donde esta la imagen



Texto

alt Texto alternativo en caso de no visualizarse la imagen



Texto

vspace hspace Espacio en blanco entre la imagen y el resto de los contenidos



Numero o porcentaje

align Alineacion del texto con respecto a la imagen



top, middle o bottom

height width Alto y ahcho de la imagen



Ejemplo de Sintasis







Tag <input>...</input>



<input> permite la introduccion de textos que posteriormente pueden ser asignados a una variable



Descripcion



Valores

name Da nombre a la variable a la cual le sean asignados los datos introducidos por el usuario



Texto

value Asigna un valor por defecto para un campo



Texto

type Indica como se veran en pantalla los datos introducidos por el usuario



Text: los datos aparecen como textos.



Password: los datos apatecen ocultos por asteriscos

format Formato al que debe ajustarse los datos introducidos por el usuario



A: cualquier caracter alfabetico en mayusculas (solo letras)



a:cualquier caracter alfabetico en minusculas (solo letras)



N: solo numeros



X: Cualquier caracter en mayusculas



x: Cualquier caracter en minusculas



M: Cualquier caracter en mayusculas (permite minusculas)



m: Cualquier caracter en minusculas (permite mayusculas)



emptyok: en "true" permite dejar en blanco el campo true / false



size:Especifica el ancho en caracteres



Número: maxlenght especifica el numero maximo de caracteres que se pueden introducir en el campo numero



Title : titulo asignado para la presentacion de input

En el siguiente ejemplo solo se permite la entrada de datos alfabeticos en letras mayusculas con una longitud maxima de 16 caracteres siendo opcional dejar el campo en blanco



Ejemplo de Sintasis



<input type="text" name="campo1" format="A" maxlength="16" emptyok=true />



Tag <noop/>



<noop/> indica que no debe ocurrir ninguna operacion





Ejemplo de Sintasis



<do type="accept" label="nada"><noop/></do>



Tag <opgroup>...</opgroup>



<opgroup> agrupa elementos de opcion manteniendo una jeralquia



Descripcion



Valores

title: titulo asignado a la presentacion del objeto



Texto



En el siguiente ejemplo tenemos dos subgrupos y cada uno de ellos engloba dos opciones y a cada una de estas opciones se le asigna la variable correspondiente.

Ejemplo de Sintasis



<select name="opcion">

<optgroup title="Deportes">

<option value="fut">futbol</option>

<option value="bal">Basquet</option>

</optgroup>

<optgroup title="Automoviles">

<option value="mec">Mecanica</option>

<option value="inf">Informacion</option>

</optgroup>

</select>



Tag <option>...</option>



<option> define una opcion dentro del tag <select>



Descripcion





Valores

value Asigna valor a la variable



Texto

title titulo asignado a la presentacion del objeto



Texto

onpick Indica un vinculo a una URL u otra carta al ser seleccionado



URL u otra carta



En el siguiente ejemplo podemos elegir entre tres opciones dependiendo de cual sea la opcion le sera asignada una u otra variable.

Ejemplo de Sintasis



<select name="opciones" value="N" ivalue=1>

<option value="N">Ninguna</option>

<option value="A">OpcionA<</option>

<option value="B">OpcionB<</option>

</select>



Postfield



Postfield



Descripcion



Valores

name nombre dado a la variable que toma el valor



Texto

value valor asignado a la variable enviada



Texto



En el siguiente ejemplo enviamos datos a un programa que esta alojado en un servidor para que estos sean ejecutados de la forma indicada

Ejemplo de Sintasis



<go method="post" href="http://www.dominio.com/cgi/datos">

<postfield name="Nombre" value="Cristina"/>

<postfield name="Apellido" value="Garcia"/>

<postfield name="Actividad" value="Programacion"/>

</go>



Tag <prev/>



<prev/> va a la pagina anterior guardada en el historial del navegador



Ejemplo de Sintasis



<do type="accept" label="Atrás"><prev/></do>



Tag <refresh/>



<refresh/> actualiza el contenido del navegador



Ejemplo de Sintasis



<do type="accept" label="actualizar"><refresh/></do>



Tag <table>...</table>



<table> crea tablas para ser utilizadas en paginas WAP



Descripcion



Valores

title titulo del elemento



Texto

colums numero de columnas representadas



Numero

aling alineacion de texto dentro de la celda



L: izquierda



C: derecha



R: centro

<tr> definicion de fila

<td> definicion de columna



En el siguiente ejemplo podemos ver una tabla formada por seis celdas agrupadas en dos columnas

Ejemplo de Sintasis



<table columns=2>

<tr>

<td>celda1</td><td>celda2</td>

</tr>

<tr>

<td>celda3</td><td>celda4</td>

</tr>

<tr>

<td>celda5</td><td>celda6</td>

</tr>

</table>



Tag <timer>



<timer> invoca una nueva tarea despues de pasar un tiempo indicado



Descripcion



Valores

name identificador de objeto



Texto

value tiempo que debe pasar en decimas de segundo para que se inicie la tarea Número



En el siguiente ejemplo aparecera la primera carta en la pantalla y transcurrido el tiempo indicado saltara a la segunda



Ejemplo de Sintasis



<wml>

<card id="carta1" ontimer="#carta2" title="Demostracion">

<timer value="35"/>

<p align="center">




<big> Bienvenidos a ... </big>

</p>

</card>

<card id="carta2" ontimer=" title="Demostracion">

<p align="center">




Demostracion de TIMER




...