Programacin

de una aplicacin Web

Unidad Temtica II
Desarrollo de Aplicaciones Web

Presenta:
M.I.S.D. Luis Miguel Zapata Alvarado
Cuatrimestre: Mayo Agosto 2011

Unidad Temtica I
Fundamentos de sitios Web

Horas Prcticas: 42
Horas Tericas: 18
Horas Totales: 60
Objetivo: El alumno desarrollar un sitio Web
con acceso a base de datos para su
publicacin.

Temas
Hojas de estilo en cascada (CSS) y
plantillas(templates)
Formularios
Conexin a una base de datos
Altas, bajas, cambios y consultas a base de
datos a travs de una aplicacin Web

Hojas de estilo en cascada (CSS)

y plantillas(templates)
CSS (Cascading Style Sheets), es un
mecanismo simple que describe cmo se va a
mostrar un documento en la pantalla, o cmo
se va a imprimir, o incluso cmo va a ser
pronunciada la informacin presente en ese
documento a travs de un dispositivo de
lectura. Esta forma de descripcin de estilos
ofrece a los desarrolladores el control total
sobre estilo y formato de sus documentos.

Hojas de estilo en cascada (CSS)

y plantillas(templates)
CSS se utiliza para dar estilo a
documentos HTML y XML, separando el
contenido de la presentacin. CSS permite a
los desarrolladores Web controlar el estilo y el
formato de mltiples pginas Web al mismo
tiempo. Cualquier cambio en el estilo marcado
para un elemento en la CSS afectar a todas
las pginas vinculadas a esa CSS en las que
aparezca ese elemento.

Hojas de estilo en cascada (CSS)

y plantillas(templates)
CSS funciona a base de reglas, es decir,
declaraciones sobre el estilo de uno o ms
elementos. Las hojas de estilo estn
compuestas por una o ms de esas reglas
aplicadas a un documento HTML o XML. La
regla tiene dos partes: un selector y la
declaracin. A su vez la declaracin est
compuesta por una propiedad y el valor que se
le asigne.

Hojas de estilo en cascada (CSS)

y plantillas(templates)
Hay diferentes medios digitales soportados
por la Web:
Imgenes: PNG, JPG, GIF, GIF Animado, BMP,
Audio: WAV, MiDi, MP3, WMA,
Video: MPEG, MP4, MOV, AVI,

Hojas de estilo en cascada (CSS)

y plantillas(templates)
Ejemplo
h1 {color: red;}
h1 es el selector
{color: red;} es la declaracin

Ejemplo Estilos de Textos en CSS

Hojas de estilo en cascada (CSS)

y plantillas(templates)
Las plantillas web son la mejor opcin para
disponer de un sitio web diseado de forma
profesional y atractiva sin necesidad de realizar
una inversin elevada.
Las plantillas son sitios web prediseados, de
forma que ya disponen de una estructura
definida, por lo tanto permiten desarrollar el
sitio web de una forma mucho ms gil y rpida
que los diseos a medida (proyectos en que se
parte de cero).

Hojas de estilo en cascada (CSS)

y plantillas(templates)
Las plantillas web son adecuadas para
aquellos sitios web que no van a requerir de
una estructura compleja y en los que su
funcin principal ser la de mostrar
informacin general sobre la propia empresa,
negocio o servicios que ofrece.

Hojas de estilo en cascada (CSS)

y plantillas(templates)

Hojas de estilo en cascada (CSS)

y plantillas(templates)
Ver ejemplos
http://plantillaswebgratis.net/
http://www.freewebtemplates.com/

Hojas de estilo en cascada (CSS)

y plantillas(templates)
Pasos para aplicar una plantilla
Descargar de internet la plantilla deseada (HTML)
Crear un directorio para hacer en esta carpeta una
copiar de la plantilla descargada
Hacer copias de la seccin principal a segn el
nmero de secciones que contendr su sitio
Iniciar la modificacin seccin por seccin y
verificar que funcionen los hipervnculos
Reemplazar las imgenes por las su proyecto

Hojas de estilo en cascada (CSS)

y plantillas(templates)
Ver ejemplo de la aplicacin de una platilla
cramac.com.mx/clio

Desarrollo de aplicaciones Web

Hay muchas herramientas para la creacin de
sitios Web. Entre estas se puede mencionar las
plataformas :

Flash
Flex
Adobe AIR
AJAX
OpenLaszlo
Silverlight de Microsoft
JavaFX Script de Sun Microsystems

Revisin Segundo Avance

Homework #7
El alumno adaptar una plantilla que utilice
CSS en su proyecto final.
Para el jueves 23 de junio de 2011

Formularios
Un
formulario
web
es
un
tipo
de formulario que es presentado en
un navegador y puede ser rellenado a travs
de una red como internet. Generalmente
cuando se ingresan los datos, se envan a
un servidor web para ser procesados.

Formularios
Los formularios web pueden ser usados para
suscripciones, encuestas, eleccin de
opciones,
enviar
palabras
para
los buscadores, etc.

Formularios
Interfaz de Usuario/GUI

Los formularios Web generalmente son

hechos en HTML y en estos pueden usarse
los siguientes elementos:
Campo de texto (input), oculto (hidde)
rea de texto (textarea)
Casilla de verificacin (checkbox)
Botn de opcin (radio button), Grupo de opcin
Lista o Men (con opcin a Men de salto)
Botn (submit)

Formularios
Los formularios pueden ser combinados
con lenguajes de programacin/script tanto
del lado del cliente como del lado del
servidor.
Del lado del cliente el estndar de facto
es JavaScript, y se utiliza en los formularios
especialmente en la validacin de datos.
Estos cdigos en JavaScript son ejecutados en
el navegador del usuario.

Formularios
En tanto del lado del servidor existen
mltiples lenguajes que pueden encargarse
de la informacin del formulario. Estos
cdigos se ejecutan en el servidor web del
sitio.

Formularios
En esta instancia el formulario puede servir
para autorizar el ingreso a un sistema,
almacenar la informacin en una base de
datos, enviar la informacin por email,
utilizar los datos del formulario para
bsqueda, etc.
Los lenguajes ms utilizados del lado del servidor
son PHP, ASP, JSP, Android, etc.

Formularios

Formularios
Desarrollo de un ejemplo de un formulario en
un editor de pginas Web
Ver ejemplo.

Formularios
Crear un formulario donde se soliciten los
siguientes datos:
Nombre (aceptar solo letras)
Telfono (aceptar slo 10 dgitos)
Correo electrnico (validar el formato)
Ubicacin (con una lista desplegable mostrar los
estados de la repblica mexicana)

Validar los datos con un script de javascript

Para el jueves 30 de junio de 2011

Conexin a una base de datos

MySQL es la base de datos open source ms
popular y, posiblemente, mejor del mundo.
Su continuo desarrollo y su creciente
popularidad est haciendo de MySQL un
competidor cada vez ms directo de gigantes
en la materia de las bases de datos como
Oracle.

Conexin a una base de datos

MySQL es un sistema de administracin de
bases de datos (Database Management
System, DBMS) para bases de datos
relacionales y orientadas a objetos.
MySQL fue escrito en C y C++ y destaca por
su gran adaptacin a diferentes entornos de
desarrollo, permitiendo su interactuacin con
los lenguajes de programacin ms utilizados
como PHP, Perl y Java y su integracin en
distintos sistemas operativos.

Conexin a una base de datos

Tambin es muy destacable, la condicin de
open source de MySQL, que hace que su
utilizacin sea gratuita e incluso se pueda
modificar con total libertad, pudiendo
descargar su cdigo fuente. Esto ha
favorecido muy positivamente en su
desarrollo y continuas actualizaciones, para
hacer de MySQL una de las herramientas ms
utilizadas por los programadores orientados a
Internet.

Conexin a una base de datos

Desarrollo de un ejemplo de la creacin de
una base de datos y sus tablas y campos
correspondientes en un servidor Web
Ver ejemplo.

Conexin a una base de datos

Crear una base de datos en el servidor donde
se registraron y crear una tabla para recibir
los datos de formulario antes creado.
Campos de la tabla: datos
id_datos (int-autonumerico-llave)
nombre (varchar 50)
telefono (varchar 10)
email (varchar 25)
ubicacion (varchar 20)

Conexin a una base de datos

Desarrollo de un ejemplo de un script que
conecta un formulario desarrollado en
XHTML con una base de datos MySQL con el
lenguaje PHP para insertar la informacin
capturada en el formulario en la base de
datos.
Ver ejemplo.

Altas, bajas, cambios y consultas a base de

datos a travs de una aplicacin Web
Desarrollar un script en PHP para insertar los
datos capturados en su formulario en la base
de datos creada en MySQL de su servidor.
Para el jueves 7 de julio de 2011

Altas, bajas, cambios y consultas a base de

datos a travs de una aplicacin Web
Crear una pgina Web para ser agregada en
su sitio Web, en donde se muestren los datos
que contiene la base de datos, y adems se
cuente con la opcin de dar de baja o
modificar.
Con un script de PHP mediante un case se
podr eliminar y/o cambiar la informacin
almacenada en la base de datos.

Proyecto Final
El alumno generar una aplicacin Web
incluyendo la documentacin tcnica
1. Determinar el nombre de la aplicacin, su
objetivo, tipo de usuarios hacia quien va
dirigido, y secciones de su sitio.
2. Su proyecto deber utilizar plantillas con hojas
de estilo en cascada (CSS)
3. Deber implementar los lenguaje XHTML,
Javascript y PHP

Proyecto Final
4. Deber contener el Modelado y una
conexin a una base de datos MySQL
donde se realicen Altas, Bajas, Cambios y
Consultas
5. Implementar un contador de visitantes
6. En las pruebas documentar los errores y su
correccin, contemplar adems de la
funcionabilidad de la aplicacin de manera
global

Proyecto Final
7. La aplicacin se entregar instalada y
funcionando en un servidor Web
8. Documentacin de la aplicacin
9. Conclusiones
10.Fecha limite de la presentacin del
sistema 10 de Agosto 2011