Programación de una aplicación Web - Cuerpo …cramac.com.mx/movil/archivos/DAW_Unidad_2.pdf ·...

Programación de una aplicación Web

Unidad Temática IIDesarrollo de Aplicaciones Web

Presenta:

M.I.S.D. Luis Miguel Zapata Alvarado

Cuatrimestre: Mayo – Agosto 2011

Unidad Temática IFundamentos de sitios Web

• Horas Prácticas: 42

• Horas Teóricas: 18

• Horas Totales: 60

• Objetivo: El alumno desarrollará un sitio Web con acceso a base de datos para su publicación.

Temas

• Hojas de estilo en cascada (CSS) y plantillas(templates)

• Formularios

• Conexión a una base de datos

• Altas, bajas, cambios y consultas a base de datos a través de una aplicación Web

Hojas de estilo en cascada (CSS) y plantillas(templates)

• CSS (Cascading Style Sheets), es unmecanismo simple que describe cómo se va amostrar un documento en la pantalla, o cómose va a imprimir, o incluso cómo va a serpronunciada la información presente en esedocumento a través de un dispositivo delectura. Esta forma de descripción de estilosofrece a los desarrolladores el control totalsobre estilo y formato de sus documentos.

Hojas de estilo en cascada (CSS) y plantillas(templates)

• CSS se utiliza para dar estilo adocumentos HTML y XML, separando elcontenido de la presentación. CSS permite alos desarrolladores Web controlar el estilo y elformato de múltiples páginas Web al mismotiempo. Cualquier cambio en el estilo marcadopara un elemento en la CSS afectará a todaslas páginas vinculadas a esa CSS en las queaparezca 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 máselementos. Las hojas de estilo estáncompuestas por una o más de esas reglasaplicadas a un documento HTML o XML. Laregla tiene dos partes: un selector y ladeclaración. A su vez la declaración estácompuesta por una propiedad y el valor que sele asigne.

Hojas de estilo en cascada (CSS) y plantillas(templates)

• Hay diferentes medios digitales soportados por la Web: – Imágenes: 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 declaración

• Ejemplo Estilos de Textos en CSS

Hojas de estilo en cascada (CSS) y plantillas(templates)

• Las plantillas web son la mejor opción paradisponer de un sitio web diseñado de formaprofesional y atractiva sin necesidad de realizaruna inversión elevada.

• Las plantillas son sitios web prediseñados, deforma que ya disponen de una estructuradefinida, por lo tanto permiten desarrollar elsitio web de una forma mucho más ágil y rápidaque los diseños a medida (proyectos en que separte de cero).

Hojas de estilo en cascada (CSS) y plantillas(templates)

• Las plantillas web son adecuadas paraaquellos sitios web que no van a requerir deuna estructura compleja y en los que sufunción principal será la de mostrarinformación 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 sección principal a según el número de secciones que contendrá su sitio

– Iniciar la modificación sección por sección y verificar que funcionen los hipervínculos

– Reemplazar las imágenes por las su proyecto

Hojas de estilo en cascada (CSS) y plantillas(templates)

• Ver ejemplo de la aplicación de una platilla

– cramac.com.mx/clio

Desarrollo de aplicaciones Web

• Hay muchas herramientas para la creación de sitios Web. Entre estas se puede mencionar las plataformas :– Flash

– Flex

– Adobe AIR

– AJAX

– OpenLaszlo

– Silverlight de Microsoft

– JavaFX Script de Sun Microsystems

Revisión Segundo AvanceHomework #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 tipode formulario que es presentado enun navegador y puede ser rellenado a travésde una red como internet. Generalmentecuando se ingresan los datos, se envían aun servidor web para ser procesados.

Formularios

• Los formularios web pueden ser usados parasuscripciones, encuestas, elección deopciones, enviar palabras paralos buscadores, etc.

FormulariosInterfaz de Usuario/GUI

• Los formularios Web generalmente sonhechos en HTML y en estos pueden usarselos siguientes elementos:

– Campo de texto (input), oculto (hidde)

– Área de texto (textarea)

– Casilla de verificación (checkbox)

– Botón de opción (radio button), Grupo de opción

– Lista o Menú (con opción a Menú de salto)

– Botón (submit)

Formularios

• Los formularios pueden ser combinadoscon lenguajes de programación/script tantodel lado del cliente como del lado delservidor.

• Del lado del cliente el estándar de factoes JavaScript, y se utiliza en los formulariosespecialmente en la validación de datos.Estos códigos en JavaScript son ejecutados enel navegador del usuario.

Formularios• En tanto del lado del servidor existen

múltiples lenguajes que pueden encargarsede la información del formulario. Estoscódigos se ejecutan en el servidor web delsitio.

Formularios

• En esta instancia el formulario puede servirpara autorizar el ingreso a un sistema,almacenar la información en una base dedatos, enviar la información por email,utilizar los datos del formulario parabúsqueda, etc.

• Los lenguajes más utilizados del lado del servidorson PHP, ASP, JSP, Android, etc.

Formularios

Formularios

• Desarrollo de un ejemplo de un formulario en un editor de páginas Web

– Ver ejemplo.

Formularios

• Crear un formulario donde se soliciten los siguientes datos:

– Nombre (aceptar solo letras)

– Teléfono (aceptar sólo 10 dígitos)

– Correo electrónico (validar el formato)

– Ubicación (con una lista desplegable mostrar los estados de la república mexicana)

• Validar los datos con un script de javascript– Para el jueves 30 de junio de 2011

Conexión a una base de datos

• MySQL es la base de datos open source máspopular y, posiblemente, mejor del mundo.Su continuo desarrollo y su crecientepopularidad está haciendo de MySQL uncompetidor cada vez más directo de gigantesen la materia de las bases de datos comoOracle.

Conexión a una base de datos

• MySQL es un sistema de administración debases de datos (Database ManagementSystem, DBMS) para bases de datosrelacionales y orientadas a objetos.

• MySQL fue escrito en C y C++ y destaca porsu gran adaptación a diferentes entornos dedesarrollo, permitiendo su interactuación conlos lenguajes de programación más utilizadoscomo PHP, Perl y Java y su integración endistintos sistemas operativos.

Conexión a una base de datos

• También es muy destacable, la condición deopen source de MySQL, que hace que suutilización sea gratuita e incluso se puedamodificar con total libertad, pudiendodescargar su código fuente. Esto hafavorecido muy positivamente en sudesarrollo y continuas actualizaciones, parahacer de MySQL una de las herramientas másutilizadas por los programadores orientados aInternet.

Conexión a una base de datos

• Desarrollo de un ejemplo de la creación de una base de datos y sus tablas y campos correspondientes en un servidor Web

– Ver ejemplo.

Conexión a una base de datos

• Crear una base de datos en el servidor dondese registraron y crear una tabla para recibirlos 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)

Conexión 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 información capturada en el formulario en la base de datos.

– Ver ejemplo.

Altas, bajas, cambios y consultas a base de datos a través de una aplicación 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 través de una aplicación Web

• Crear una página Web para ser agregada ensu sitio Web, en donde se muestren los datosque contiene la base de datos, y además secuente con la opción de dar de baja omodificar.

– Con un script de PHP mediante un “case” sepodrá eliminar y/o cambiar la informaciónalmacenada en la base de datos.

Proyecto Final

• El alumno generará una aplicación Web

incluyendo la documentación técnica1.Determinar el nombre de la aplicación, 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

conexión 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

corrección, contemplar además de la

funcionabilidad de la aplicación de manera

global

Proyecto Final

7. La aplicación se entregará instalada y

funcionando en un servidor Web

8. Documentación de la aplicación

9. Conclusiones

10.Fecha limite de la presentación del

sistema 10 de Agosto 2011