Páginas WAP - Cursos Manuales Gratuitos

Principal | Buscar | Contacto | Mapa |

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

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">
<p>Esta es la carta numero 1</p>
</card>
<card id="numero2" title="Carta 2">
<p>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:

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">

<p>Esta es la carta numero 1</p>
</card>
<card id="numero2" title="Carta 2">

<p>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

?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">
<p>
<a href="test_enlace.wml">Pagina de link</a>
</p>
</card>
</wml>

Los Textos

Los textos deben de ir comprendidos entre los tags <p> y </p>, para los saltos de linea se utiliza la etiqueta <br/>

El tag <p> 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">

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><br/>

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

</card>

</wml>

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

Caracter	Codigo
á	á
é	é
í	í
ó	ó
ú	ú
ç	ç
Ñ	Ñ
ñ	ñ
<	<
>	>
&	&
"	"
nbsp	&#160

Las etiquetas para el formato de texto son las siguientes:

Tags	Formato
<b>...</b>	Negrita
<i>...</i>	Cursiva
<em>...</em>	Enfasis
<u>...</u>	Subrayado
<strong>...</strong>	Mucho enfasis
<big>...</big>	Fuente grande
<small>...</small>	Fuente pequeña

Formatos de 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> normal<br/>

<b>negrita</b><br/>

<i>cursiva</i><br/>

<u>subrayada</u><br/>

<strong>enfasis</strong><br/>

<big>grande</big><br/>

<small>pequeña</small></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

?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">
<p>
dato1: <input name="dato1" size="15"/><br/>
dato2: <input name="dato2" size="15" /><br/>
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">
<p>
<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:

<a title="link" href="http://wap.enlace.com/">ENLACE</a>

href:

<a href="http://wap.enlace.com/">ENLACE</a>

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

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

newcontext

Tag <do>...</do>

<do> genera vinculos a otras cartas

atributo	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

type

Tag <go>...</go>

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

atributo	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

Tag <img>...</img>

<img> introduce una imagen en una pagina WML

atributo	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	Numero

Ejemplo de Sintasis

Tag <input>...</input>

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

atributo	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	numero
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

Tag <noop/>

<noop/> indica que no debe ocurrir ninguna operacion

Ejemplo de Sintasis

Tag <opgroup>...</opgroup>

<opgroup> agrupa elementos de opcion manteniendo una jeralquia

atributo	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>

atributo	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

atributo	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

Tag <prev/>

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

Ejemplo de Sintasis

Tag <refresh/>

<refresh/> actualiza el contenido del navegador

Ejemplo de Sintasis

Tag <table>...</table>

<table> crea tablas para ser utilizadas en paginas WAP

atributo	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

atributo	Descripcion	Valores
name	identificador de objeto	Texto
value	tiempo que debe pasar en decimas de segundo para que se inicie la tarea	Numero

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">
<br/>
<big> Bienvenidos a ... </big>
</p>
</card>
<card id="carta2" ontimer=" title="Demostracion">
<p align="center">
<br/>
<b>Demostracion de TIMER<br/></b>

...

Autora : Maria Lara Merlos
Bibliografía : Hispaphone