Taller de Demostración Del Uso de PHP, Ajax y Prototype - Paso #1

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Paso #1
Cosas por hacer

Taller de demostración del uso de PHP, Ajax y Prototype.
Paso#1: Creación de la interfaz de usuario (XHTML/CSS).
Jorge Iván Meza Martínez <jimezam@gmail.com>
http://www.jorgeivanmeza.com/
http://educacion.misservicios.net/
Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 1

Contenido
● Introducción.
● Descripción de la funcionalidad esperada de la aplicación.
● Diseño de la interfaz del usuario.
● Creación del proyecto y definición de la estructura de directorios y archivos a
utilizarse.
● Implementación del documento de presentación del proyecto.
– Estructura general de un documento XHTML.
– Cabecera genérica de un documento XHTML.
– Estructura general del sitio.
– Implementación del pie de página.
– Implementación de la cabecera.
– Implementación del contenido.
– Implementación del mensaje de estado.
– Integración del selector de fechas.
Introducción
Durante la presente sesión se realizará la

implementación de la interfaz de usuario del
proyecto, es decir, todo lo referente con la
implementación de la vista: XHTML y CSS, los cuales
se almacenarán en archivos independientes que
posteriormente serán referenciados entre sí.
Para este primer paso se utilizará a Aptana como IDE

y a Firefox con sus respectivos plugins como cliente
web y asistente para el desarrollo.

Paso #1
Implementación de la interfaz de usuario.

Funcionalidad de la aplicación web
El usuario podrá realizar las siguientes acciones

relacionadas con sus tareas por hacer.
● Agregar una nueva tarea.

● Editar una tarea ya existente.
● Marcar una tarea como activa.
● Remover una tarea ya realizada.
● Ordenar las tareas pendientes según su prioridad.

Información de una tarea por hacer
Una tarea por hacer incluye la siguiente

información.
● Nombre.
● Descripción.
● Fecha de inicio.
● Fecha de terminación.

Especificación de la interfaz
De manera general la interfaz de usuario se dividirá

en cuatro secciones.
● Título.
● Contenido.
● Pie de página.
● Mensaje de estado (para las transacciones AJAX).

Especificación de la interfaz
El contenido de la interfaz de usuario se dividirá a su vez
en dos secciones:
La lista de tareas que permitirá lo siguiente.
● Visualizar las tareas activas.

● Reordenar las tareas según su prioridad.
● Remover las tareas completadas.
● Marcar las tareas en progreso.
La información de una tarea que permitirá lo siguiente.
● Crear nuevas tareas.

● Editar tareas existentes.

Prototipo de la interfaz de usuario
http://demo.jorgeivanmeza.com/PHP/CosasPorHacerSimple/Paso1/demo/
Creación del proyecto con Aptana
● Elija el menú: File > New > Project.
● Bajo la rama Aptana Projects seleccione PHP

Project y presione el botón Next.
● Elija el nombre del proyecto: CosasPorHacerSimple

y presione el botón Finish.
Tenga en cuenta que la ruta final donde se ubicarán

los archivos será la concatenación entre la ubicación
del Workspace (determinada al iniciar Aptana) y el
nombre del proyecto (recién ingresado).
Estructura de directorios del proyecto

De la sección de Project (lado izquierdo) remueva
cualquier archivo que el asistente haya creado y
agregue las siguientes carpetas haciendo click
derecho sobre el proyecto y eligiendo del menú
contextual las opciones New > Folder.
\media
\css
\img
\js
Téngase en cuenta que css, img y js se

encuentran contenidas por de la carpeta media.
Creación del archivo HTML principal
Cree un nuevo archivo HTML haciendo click

derecho sobre el proyecto y eligiendo las opciones
New > HTML File.
El nombre del archivo (File name) deberá ser

index.html.
Este archivo almacenará el contenido del prototipo

que se está implementado durante la presente
sesión.

Creación del archivo de hoja de estilos
Cree un nuevo archivo CSS haciendo click derecho

sobre la carpeta css y eligiendo las opciones New
> CSS File.
El nombre del archivo (File name) deberá ser

style.css.
Este archivo determinará la presentación del

prototipo que se está implementado durante la
presente sesión.

Estructura básica de un documento XHTML
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'

'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>

</head>
<body>

</body>
</html>

Estructura básica de un documento XHTML
El DOCTYPE determina determina la definición del

tipo de documento (DTD) que se utilizará para
interpretar el contenido del archivo. En este caso
se está utilizando el XHTML Transitional el cual
es mas permisivo que el Strict.
El xmlns de la etiqueta html define el espacio de

nombres de XHTML.
La sección head contendrá la cabecera del

documento mientras que la sección body
contendrá el cuerpo del documento.
Head: contenido básico
<title>Cosas por hacer | Demostración de Ajax, PHP y

Prototype</title>
<meta http-equiv='Content-Type' content='text/html;

charset=UTF-8' />
<meta name='author' content='Jorge Iván Meza Martínez -

http://www.jorgeivanmeza.com/' />
<meta name='description' content='Cosas por hacer -

demostración del uso de Ajax, PHP y Prototype' />

Head: contenido básico

El content-type define el tipo de contenido que el
navegador puede esperar cuando le envíen el
documento, así como el tipo de codificación. Para
este caso el documento es un text/html y su
codificación es UTF-8.
La etiqueta author define el autor del documento.
La etiqueta description especifica una descripción del

documento.
Estas etiquetas son conocidas como metaEtiquetas ya

que exponen información del documento mismo en
lugar de su contenido.
Head: asociar el archivo de estilos
Dentro de la sección head agregar una referencia al

archivo syles.css recién creado.
<link href='media/css/style.css' type='text/css'
rel='stylesheet' />
Esto hará que se apliquen al documento las clases

CSS definidas en el archivo referenciado.

Estructura general del contenido de la página

página
cabecera
contenido
pies

Estructura general del contenido de la página
<div id="pagina">
<div id="cabecera">
Esta es la cabecera
</div>
<div id="contenido">
Este es el contenido
</div>
<div id="pies">
Estos son los pies
</div>
</div>

Un poco de estilo
body #contenido
{ {
font-family: arial, "lucida background-color: blue;
console", sans-serif; }
}
#pies
#pagina {
{ background-color: green;
width: 1024px; margin-top: 10px;
margin: auto; padding: 5px;
background-color: yellow; }
}
#cabecera
{
background-color: orange;
margin-bottom: 10px;
padding: 15px;
}

Resultado

Resultado
padding: 15px; margin-bottom: 10px;
padding: 5px; margin-top: 10px;

Pie de página
La sección mas simple para empezar a implementar

el contenido es el pie de página, formado por un
texto y un enlace a la licencia del sitio.

Pie de página: contenido
Algunos derechos reservados bajo la licencia

<a rel="license" target='_blank'
href="http://creativecommons.org/licenses/by-nc-sa/2.5/co/">
<img alt="Creative Commons License" style="border-width:0"
src="http://i.creativecommons.org/l/by-nc-sa/2.5/co/80x15.png"
/>
</a>

Jorge Iván Meza Martínez -
<a href="http://www.jorgeivanmeza.com/">
http://www.jorgeivanmeza.com/</a>.

Pie de página: complementar estilos
#pies
{
background-color: #FFFFFF;
margin-top: 10px;
padding: 5px;
border-top: 3px solid #3399FF;
font-size: 11px;
text-align: center;
clear: both;
}
#pies img
{
vertical-align: middle;
}

Pie de página: resultado final
margin-top: 10px; border-top: 3px solid #3399FF; font-size: 11px;

text-align: center;
padding: 5px; vertical-align: middle;

Cabecera
Está compuesta por dos secciones: un logo y un

texto ubicado al lado derecho del primero.

Cabecera: logo
Se puede utilizar cualquier imagen compatible con un
navegador web: gif, jpeg, png.
La imagen para la demostración fue obtenida de OpenClipart

desde la siguiente ubicación.
Ubique el archivo logo.png en la carpeta media/img.

Cabecera: contenido
<div id='cabecera_logo'>
<img src="media/img/logo.png" id='pagina_logo' alt="logo" />
</div>
<div id='cabecera_texto'>
<span class='titulo'>Cosas por hacer</span>
<br />
<span class='subtitulo'>Aplicación de demostración de PHP,
Ajax y Prototype</span>
<br />
<span class='subtitulo'>
<a href="http://www.jorgeivanmeza.com/">
http://www.jorgeivanmeza.com/</a>
</span>
</div>

Cabecera: resultado parcial

Cabecera: complementar estilos

#cabecera #cabecera_texto
{ {
background-color: #FFFFFF; padding-left: 110px;
margin-bottom: 10px; }
padding: 15px;
border-bottom: 5px solid .titulo
#3399FF; {
} font-size: 30px;
color: #0040FF;
#pagina_logo }
{
width: 100px; .subtitulo
} {
font-size: 17px;
#cabecera_logo }
{
float: left;
padding-top: 15px;
}

Cabecera: resultado final

font-size: 30px;
padding-top: 15px; color: #0040FF;
width: 100px;
padding-left: 110px;
margin-bottom: 10px; border-bottom: 5px solid #3399FF;
font-size: 17px;
padding: 15px;

Contenido: secciones
El contenido principal de la página tiene dos

secciones:
● Lista de tareas.
● Información de una tarea.

Contenido: contenido general
<div id='contenedor_tareas'>

</div>
<div id='contenedor_formulario'>

</div>

Lista de tareas: secciones
●Título.
●Lista de tareas.
● Casilla de verificación.
● Nombre de la tarea.
●Botón para remover tareas.
Botón para marcar tareas.

Lista de tareas: contenido

<p class='titulo_1'>Lista de tareas</p>
<div id='lista_tareas'>
<div class='tarea_item'>
<span class='tarea_marca'>
<input type='checkbox' id='marca[]' value='xxx' />
</span>
<span class='tarea_texto'>Hola Mundo</span>
</div>
</div>
<p class='botones_formulario'>
<input type='button' id='remover_tarea'
value='Remover Tareas' />
<input type='button' id='marcar_tarea'
value='Marcar Tareas' />
</p>
<br />
Lista de tareas: resultado parcial

Lista de tareas: complementar estilos

#contenedor_tareas #lista_tareas
{ {
background-color: margin: 10px 30px 15px
#FFFFFF; 30px;
float: left; }
width: 50%;
} .tarea_item
{
.titulo_1 background-color: #FFF0CF;
{ padding: 5px;
text-align: center; margin-bottom: 2px;
font-weight: bolder; }
border-bottom: 1px
dotted; .botones_formulario
margin: 10px 30px 15px {
30px; text-align: center;
padding-bottom: 5px; }
}

Lista de tareas: resultado final

text-align: center;
font-weight: bolder;
border-bottom: 1px dotted;
margin: 10px 30px 15px 30px;
padding-bottom: 5px;
padding: 5px;
margin-bottom: 2px;
text-align: center;

Información de una tarea: secciones
●Título.
●Formulario edición/creación de tareas.
● Nombre.
● Descripción.
● Fecha de inicio.
● Fecha de terminación.
●Botón de Nueva Tarea.
Botón para Crear Tareas.

Información de una tarea: contenido
<p class='titulo_1'>Información de una tarea</p>
<form action="">

<p class='botones_formulario'>
<input type='button' id='nueva_tarea' value='Nueva Tarea' />
<input type='button' id='enviar_tarea' value='Crear Tarea'/>
</p>
</form>
<br />

Formulario tarea: contenido

<table class='campos_formulario'>
<tr>
<td class='campo_titulo'>Nombre</td>
<td class='campo_valor'>
<input type='text' id='t_nombre' size='30' maxlength='30' />
</td>
</tr>
<tr>
<td class='campo_titulo'>Descripción</td>
<textarea id='t_descripcion' cols='30' rows='3'></textarea>
</td>
</tr>
<tr>
<td class='campo_titulo'>Fecha de inicio</td>
<input type='text' id='t_fecha_inicio' size='10' maxlength='10' />
</td>
</tr>
<tr>
<td class='campo_titulo'>Fecha de terminación</td>
<input type='text' id='t_fecha_terminacion' size='10' maxlength='10' />
</td>
</tr>
</table>

Información de una tarea: resultado parcial

Información de una tarea: complementar estilos

#contenedor_formulario .campo_valor input
{ {
background-color: font-size: 12px;
#FFFFFF; }
float: right;
width: 50%; .campo_valor textarea
} {
font-size: 12px;
.campos_formulario }
{
margin: auto;
}
.campo_titulo
{
font-weight: bolder;
font-size: 12px;
text-align: right;
padding-right: 10px;
}
Información de una tarea: resultado final
font-weight: bolder; font-size: 12px; font-size: 12px;

font-size: 12px;
text-align: right;
padding-right: 10px;

Complementando estilos generales
#pagina
{
width: 1024px;
margin: auto;
background-color: #FFFFFF;
}
input[type="submit"], input[type="button"]
{
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
height: 28px;
background-color: #8FB0FF;
}

Resultado final

Mensaje de estado
El mensaje de estado le informa al usuario que tipo

de acción se encuentra desarrollando la aplicación
web. Es útil durante la transmisión de mensajes
asíncronos con AJAX.

Mensaje de estado: imagen
Copie el archivo de imagen ajax-loader.gif y

ubíquelo bajo la carpeta media/img.

Mensaje de estado: contenido
Agregue el siguiente fragmento de código XHTML al

final del cuerpo (body) de la página.
<div id='mensaje_ajax'>
<img src='media/img/ajax-loader.gif' alt='[...]' />
Bienvenido!
</div>

Mensaje de estado: complementar estilos
#mensaje_ajax
{
font-size: 12px;
border: 1px solid red;
position: absolute;
padding: 7px 5px 7px 5px;
top: 0px;
left: 0px;
}
#mensaje_ajax img
{
}

Mensaje de estado: resultado final
position: absolute;
top: 0px;
left: 0px;
border: 1px solid red; font-size: 12px;
padding: 7px 5px 7px 5px;

Selector de fechas
Para finalizar la implementación de la interfaz de usuario
del proyecto se integrará el widget Swazz Calendar que
permitirá una fácil y rápida selección de fechas por parte
del usuario final.
Para hacer esto será necesario desarrollar las siguientes

tareas.
● Convertir los campos de fechas en sólo lectura.

● Copiar el archivo del widget a la ubicación apropiada.
● Incluya la carga del archivo del widget en la cabecera
de la página.
● Modificar los campos de fecha para que utilicen al
widget.
Selector de fechas: campos de sólo lectura
Agregue a los campos t_fecha_inicio y

t_fecha_terminacion el siguiente atributo.
readonly='readonly'
De la siguiente manera.
<input type='text' id='t_fecha_inicio' size='10'
maxlength='10' readonly='readonly' value="" />
<input type='text' id='t_fecha_terminacion' size='10'

maxlength='10' readonly='readonly' value="" />

Selector de fechas: copiar archivo de widget
Copie el archivo calendar.js bajo la carpeta

media/js.
La distribución de Swazz JavaScript Calendar la

podrá encontrar en la siguiente dirección.
http://calendar.swazz.org/

Selector de fechas: carga del archivo del widget
Para hacer esto, agregue la siguiente línea XHTML

dentro del head de la página.
<script src="media/js/calendar.js"
type="text/javascript"></script>

Selector de fechas: utilizar el widget
Agregue manejadores de eventos de foco y de click

para los campos t_fecha_inicio y
t_fecha_terminacion de la siguiente manera.
<input type='text' id='t_fecha_inicio' size='10'
maxlength='10' readonly='readonly' value=""
onfocus="this.select();lcs(this);"
onclick="event.cancelBubble=true;this.select();lcs(this);" />
<input type='text' id='t_fecha_terminacion' size='10'

maxlength='10' readonly='readonly' value=""
onfocus="this.select();lcs(this);"
onclick="event.cancelBubble=true;this.select();lcs(this);" />

Selector de fechas: demostración

Fin de la presentación.
Creative Commons (CC)

Taller de Demostración Del Uso de PHP, Ajax y Prototype - Paso #1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Taller de Demostración Del Uso de PHP, Ajax y Prototype - Paso #1

Transféré par

Droits d'auteur :

Formats disponibles

Cosas por hacer – taller de demostración del uso de PHP, Ajax y Prototype :: Paso #1

Cosas por hacer

Paso#1: Creación de la interfaz de usuario (XHTML/CSS).

Jorge Iván Meza Martínez <jimezam@gmail.com>

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 1

Durante la presente sesión se realizará la

Para este primer paso se utilizará a Aptana como IDE

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 3

Implementación de la interfaz de usuario.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 4

Funcionalidad de la aplicación web

El usuario podrá realizar las siguientes acciones

● Agregar una nueva tarea.

● Marcar una tarea como activa.

● Remover una tarea ya realizada.

● Ordenar las tareas pendientes según su prioridad.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 5

Información de una tarea por hacer

Una tarea por hacer incluye la siguiente

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 6

De manera general la interfaz de usuario se dividirá

● Mensaje de estado (para las transacciones AJAX).

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 7

La lista de tareas que permitirá lo siguiente.

● Visualizar las tareas activas.

● Remover las tareas completadas.

● Marcar las tareas en progreso.

La información de una tarea que permitirá lo siguiente.

● Crear nuevas tareas.

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 8

Prototipo de la interfaz de usuario

Creación del proyecto con Aptana

● Elija el menú: File > New > Project.

● Bajo la rama Aptana Projects seleccione PHP

● Elija el nombre del proyecto: CosasPorHacerSimple

Tenga en cuenta que la ruta final donde se ubicarán

Estructura de directorios del proyecto

Téngase en cuenta que css, img y js se

Creación del archivo HTML principal

Cree un nuevo archivo HTML haciendo click

El nombre del archivo (File name) deberá ser

Este archivo almacenará el contenido del prototipo

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 12

Creación del archivo de hoja de estilos

Cree un nuevo archivo CSS haciendo click derecho

El nombre del archivo (File name) deberá ser

Este archivo determinará la presentación del

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 13

Estructura básica de un documento XHTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 14

Estructura básica de un documento XHTML

El DOCTYPE determina determina la definición del

El xmlns de la etiqueta html define el espacio de

La sección head contendrá la cabecera del

Head: contenido básico

<title>Cosas por hacer | Demostración de Ajax, PHP y

<meta http-equiv='Content-Type' content='text/html;

<meta name='author' content='Jorge Iván Meza Martínez -

<meta name='description' content='Cosas por hacer -

Jorge Iván Meza Martínez - http://www.jorgeivanmeza.com/ | 16

Head: contenido básico

La etiqueta author define el autor del documento.