Desarrollo de aplicaciones Web

L.S.C.A. Gilberto Medina Castro

Sistemas de Calidad en TI
COMPETENCIA(S) IMPLEMENTAR APLICACIONES DE SOFTWARE MEDIANTE A LA(S) QUE TCNICAS DE PROGRAMACIN Y CONSIDERANDO LOS CONTRIBUYE LA REQUERIMIENTOS DE LA ORGANIZACIN PARA EFICIENTAR SUS PROCESOS. ASIGNATURA: OBJETIVO GENERAL DE LA ASIGNATURA:
EL ALUMNO DESARROLLAR UN SITIO Y APLICACIONES WEB CON ACCESO A BASE DE DATOS, PARA EFICIENTAR PROCESOS EN UNA ORGANIZACIN

Expectativas

Evaluacin
TIPO DE SABER CRITERIO Tipo de Indicador IP= Indicador Plataforma IC= Indicador Clase Examen (Plataforma) Tareas o Actividades de plataforma Examen Integrador ConsultaBibliogrfica Consulta Virtual Saber Hacer (producto) Saber Hacer (desempeo) Avance de proyecto ProyectoIntegrador Coevaluacin Bitcora Auto evaluacin Calificacin completa del 3er Parcial IP IP IC IC IC IC IC IC IC IC IC IP IC 1 30% 10% 0% 5% 5% 5% 20% 10% 0% 2 25% 10% 0% 5% 5% 5% 20% 15% 0% 3 0% 5% 20% 5% 5% 10% 15% 0% 30% 2.50% 5% 2.50% 0% 100% Extraord. 60% 0% 0% 0% 0% 0% 0% 0% 0% 0% 0% 0% 40% 100% PONDERACIONES ASIGNADAS PARA LAS EVALUACIONES

Saber

Saber Hacer

Saber Ser

5% 5% 5%
0% 100%

5% 5% 5%
0% 100%

Reglamento

Temario
No I UNIDADES NOMBRE FUNDAMENTOS DE SITIOS WEB
Entorno de las aplicaciones Web (Internet, Intranet y Extranet)

Metodologa de desarrollo y publicacin de un Sitio Web

Lenguaje XHTML

II

PROGRAMACIN DE UNA APLICACIN WEB

Fundamentos de programacin Web Configuracin del Entorno Web Mtodos de conexin de forma abierta Mtodos de conexin a datos usando directamente los drivers del proveedor. Manipulacin de datos a travs de un programa

Bibliografa
Autor Mcneil, Patrick Ao (2008 ) Ttulo del Documento The web designers Idea Book: The Ultimate Guide Principios de seguridad en el comercio electrnico (1era Edicin) Web Applications Design Patters (Interactive Technologies. 1st Ed.) Ciudad Ontario Pas Canada Editorial FW Publications Inc.

Puentes Cairo, Juan Francisco.

(2009)

Mxico, D.F.

Mxico

AlfaOmega Ra-Ma

Vora, P.

(2009)

New, Jersey.

EE.UU.

Morgan Kaufmann.

Arquitectura de las aplicaciones Web.

Arquitectura de dos niveles:
Es la ms simple, se tiene el nivel del Cliente y el nivel del Servidor.

Arquitectura Web de tres niveles:

El primer nivel consiste en la capa de presentacin que incluye no slo el navegador, sino tambin el servidor web que es el responsable de dar a los datos un formato adecuado. El segundo nivel est referido habitualmente a algn tipo de programa o script. Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su ejecucin.

Lenguajes de programacin del lado del cliente.

Los programas del lado del cliente estn incluidos dentro de la pgina HTML, se descargan del servidor junto con este. Los programas se ejecutan dentro del mbito del browser.

Tecnologas y lenguajes del lado del cliente.

Navegadores para Web. HTML. Javascript y Vbscript. Applets en Java. Flash (lenguaje ActionScript). XML. PDF. AJAX, acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML).

Lenguajes del lado del cliente

Algunos navegadores Web.
Amaya Epiphany Galeon Internet Explorer Konqueror Lynx Mozilla suite navigator Mozilla Firefox Opera Safari Shiira Maikel Navigator

Tecnologas y lenguajes del lado del cliente.

Algunos de estos lenguajes y tecnologas requieren de un programa especial (plug-in) instalado en la computadora del usuario. Ejemplo: Adobe Flash Player. Un complemento (o plug-in en ingls) es una aplicacin que se relaciona con otra para aportarle una funcin nueva y generalmente muy especifica. Esta aplicacin adicional es ejecutada por la aplicacin principal e interactan por medio de la API.

Lenguajes de programacin del lado del servidor.

Se ejecutan en el servidor de Web y son dependientes de la plataforma del servidor.

Se usan para acceder a recursos del servidor, como bases de datos y generacin de contenido dinmico para las pginas.

Lenguajes de programacin del lado del servidor.

Por ejemplo, el mbito de ejecucin de una pgina ASP.NET.

Lenguajes de programacin del lado del servidor.

Algunos ejemplos de lenguajes del lado del servidor: ASP, ASP.NET (son tecnologas, soportan diferentes lenguajes como VB, C#, C++, etc.). PHP. JSP. Perl. Ruby. Python. XML.

Servidor Web
Un servidor web es un programa que implementa el protocolo HTTP ). Este protocolo pertenece a la capa de aplicacin del modelo OSI y est diseado para transferir lo que se llama hipertextos, pginas web o pginas HTML: textos complejos con enlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductores de msica.

Servidor Web.
Algunos ejemplos: CERN httpd Apache IIS Resin Tomcat Geronimo JBoss JOnAS Cherokee

Ambientes para el desarrollo de aplicaciones Web.

Los IDE (ambientes integrados de desarrollo) para aplicaciones Web son muy numerosos. Considerar los que permitan trabajar con los diferentes lenguajes para Web. Algunos son especficos para lenguajes del lado del servidor. Por ejemplo, Visual Studio solo soporta ASP.NET del lado del servidor. Existen IDEs de buena cantidad, libres y gratuitos de buena calidad.

Ambientes para el desarrollo de aplicaciones Web.

Algunos ejemplos de IDE para Web:
Microsoft Visual Studio. Microsoft Web Developer Express. Mono (para ASP.NET). NetBeans. Jbuilder. Eclipse. Dreamweaver

Metodologas para el desarrollo de aplicaciones Web.

Ciclo de vida clsico. Pressman, adapta esta metodologa para el desarrollo de Web, en lo que el llama la Ingeniera Web:
Formulacin. Planificacin. Anlisis (contenido, interaccin, funcional, configuracin). Diseo (arquitectnico, navegacin, interfaz, de base de datos). Implementacin. Pruebas.

Metodologas para el desarrollo de aplicaciones Web.

UWE UML (UML-Based Web Engineering) es una metodologa de desarrollo de aplicaciones web, utilizada en la ingeniera web, prestando especial atencin en sistematizacin y personalizacin (sistemas adaptativos).

UWE UML
El mtodo UWE UML consta de seis modelos:
Modelo de casos de uso para capturar los requisitos del sistema. Modelo conceptual para el contenido (modelo del dominio). Modelo de usuario: modelo de navegacin que incluye modelos estticos y dinmicos. Modelo de estructura de presentacin, modelo de flujo de presentacin. Modelo abstracto de interfaz de usuario y modelo de ciclo de vida del objeto. Modelo de adaptacin.

Aspectos de seguridad.
Las aplicaciones Web estn ms expuestas a ataques. Se pueden tener ataques en tres niveles:
A la computadora del usuario. Al servidor. A la informacin en trnsito.

La seguridad en Web tiene 3 etapas primarias: Seguridad de la computadora del usuario. Seguridad del servidor Web y de los datos almacenados ah. Seguridad de la informacin que viaja entre el servidor Web y el usuario.

Seguridad de la computadora del usuario Los usuarios deben contar con navegadores y plataformas seguras, libres de virus y vulnerabilidades. Tambin debe garantizarse la privacidad de los datos del usuario.

Seguridad del servidor Web y de los datos almacenados ah Se debe garantizar la operacin continua del servidor, que los datos no sean modificados sin autorizacin (integridad) y que la informacin slo sea distribuida a las personas autorizadas (control de acceso).

Tarea
Realizar la lectura sobre la metodologa para creacin de sitios Web y realizar un resumen del mismo (en la libreta)

 XHTML
Reformulacin de HTML 4.0 en XML

HTML
El HyperText Markup Language es el lenguaje de publicacin usado por la World Wide Web. Es una aplicacin SGML (Standard Generalized Markup Language), un sistema para definir lenguajes para dar formatos a documentos.

Pgina 29

 Partes de un documento HTML

Una seccin de cabecera que contiene el ttulo del documento y otras informaciones sobre ste. El cuerpo del documento.

Por ser una aplicacin SGML incluye una Definicin del Tipo de Documento (DTD)
El DTD define la sintaxis de las estructuras de formato y puede incluir definiciones adicionales, tales como referencias a entidades de caracteres (nombres simblicos o numricos de caracteres que pueden incluirse en un documento HTML).
Pgina 30

Ejemplo HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> DTD <HTML LANG="es"> <HEAD> <TITLE>Ttulo del documento</TITLE> Cabecera </HEAD> <BODY> <H1>Cabecera de documento</H1><!-- Ttulo de seccin --> <P ID="inicial">Un prrafo en el cuerpo<BR>del documento.</P> Cuerpo <HR> </BODY> </HTML>

Pgina 31

Ejemplo XHTML
<?xml version=1.0 encoding=UTF-8?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/html4/strict.dtd> <html xmlns=http://www.w3.org/1999/xhtml" xml:lang=es lang=es> <head> <title>Ttulo del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Ttulo de seccin --> <p id=inicial>Un prrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

Pgina 32

Ejemplo XHTML (XML)

<?xml version="1.0" encoding=UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Ttulo del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Ttulo de seccin --> <p id=inicial>Un prrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

Pgina 33

Ejemplo XHTML (DTD)

<?xml version=1.0 encoding=UTF-8?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Ttulo del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Ttulo de seccin --> <p id=inicial>Un prrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

Pgina 34

Ejemplo XHTML (Esp. Nombres)

<?xml version=1.0 encoding=UTF-8?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Ttulo del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Ttulo de seccin --> <p id=inicial>Un prrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

Pgina 35

Ejemplo XHTML (Elementos)

<?xml version=1.0 encoding=UTF-8?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Ttulo del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Ttulo de seccin --> <p id=inicial>Un prrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

Pgina 36

Ejemplo XHTML (Elem. vacos)

<?xml version=1.0 encoding=ISO-8859-15?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Ttulo del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Ttulo de seccin --> <p id=inicial>Un prrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

Pgina 37

Ejemplo XHTML (Atributos y Ent.)

<?xml version=1.0 encoding=ISO-8859-15?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Ttulo del documento</title> </head> <body> <h1><img src=j0335100.gif width=85 height=85 alt=logo /> Cabecera de documento</h1> <!-- Ttulo de seccin --> <p id=inicial>Entrada de texto<br /> <input type=text value=&#8364; &#x20AC; &euro; readonly=readonly /></p> <hr /> </body> </html>
Pgina 38

Tipo de elementos del cuerpo (1)

Elementos en bloque y elementos en lnea
Se distinguen en los siguientes aspectos
Modelo de contenido
Generalmente, los elementos en bloque pueden contener elementos en lnea y a otros elementos en bloque. Generalmente, los elementos en lnea slo pueden contener datos y a otros elementos en lnea. Inherentemente a esta distincin estructural est la idea de que los elementos en bloque crean estructuras "ms grandes" que los elementos en lnea.

Pgina 39

Tipo de elementos del cuerpo (2)

Formato
Los elementos en bloque tienen por defecto un formato diferente que el de los elementos en lnea. Generalmente, los elementos en bloque comienzan en una nueva lnea, y los elementos en lnea no.

Direccionamiento
Por razones tcnicas relacionadas con el algoritmo de texto bidireccional de UNICODE, los elementos en bloque y en lnea difieren en el modo de heredar la informacin de direccionamiento.

Pgina 40

XHTML (4)
Organizacin de elementos
Elementos de nivel superior
html, head, body

Elementos de cabecera
link, meta, script, style, title

Elementos en bloque
div, h1 a h6, hr, noscript, p, pre

Elementos en lnea
br, a, img, map, area, script, span

Pgina 41

XHTML (5)
Listas
dl, dt, dd, ul, ol, li

Tablas
table, caption, tr, th, td

Elementos de frase
abbr, acronym, code, em, strong, var

Formularios
form, button, fieldset, legend, input, label, select, optgroup, option, textarea
Pgina 42

Entidades de carcter
Sintaxis:
&cdigo;
Donde cdigo es una palabra reservada o un nmero que indica el carcter a representar

Permiten poner caracteres especiales en un documento:

Letras acentuadas, etc.

Juego de caracteres para el espaol:

ISO 8859-1 (Latin-1)

Algunas entidades de carcter

&aacute; &eacute; ... &Aacute; ... &ntilde; &Ntilde; &iquest; &iexcl; &quot; &amp; &lt; &gt; &nbsp; &copy; &euro; &rdash; &mdash; & < >

Ejercicio
Crear una pgina Web que incluya:
Una imagen Ttulos, prrafos Un men con enlaces a otras pginas
Hecho con una lista desordenada

Etctera

XHTML (6)
Atributos principales
Se pueden aplicar a la mayora de los elementos.
id: permite asignar un identificador a un nico elemento class: permite asignar una clase o un conjunto de clases a un elemento. title: permite aplicar un ttulo a un elemento especfico. style: permite aplicar un estilo a un elemento especfico.

Pgina 46

XHTML (7)
Atributos de internacionalizacin
Se pueden aplicar a la mayora de los elementos.
lang: especifica un lenguaje que se aplicar a un elemento y a su contenido. El valor del atributo debe especificarse conforme a la RFC 1766 (p.e, es-ES para espaol). dir: especifica el sentido del texto de izquierda a derecha (dir="ltr", el valor por defecto) o de derecha a izquierda (dir="rtl").

Pgina 47

XHTML (8)
Atributos de teclado
Se pueden aplicar a los elementos a, area y formularios.
acceskey: permite asignar una tecla de acceso rpido a un elemento. tabindex: permite asignar un orden de tabulacin a un elemento.

Pgina 48

XHTML (9)
Eventos
Eventos de formulario onchange: se ejecuta el script cuando el elemento cambia. onsubmit: se ejecuta el script cuando se enva el formulario. onreset: se ejecuta el script cuando se limpia el formulario. onselect: se ejecuta el script cuando se selecciona el elemento. onblur: se ejecuta el script cuando el elemento pierde el foco. onfocus: se ejecuta el script cuando el elemento gana el foco.
Pgina 49

XHTML (10)
Eventos de ventana
onload: el script se ejecuta cuando se carga un documento. onunload: el script se ejecuta cuando se descarga un documento.

Eventos de teclado
onkeydown: el script se ejecuta cuando se presiona una tecla. onkeypress: el script se ejecuta cuando se presiona y libera una tecla. onkeyup: el script se ejecuta cuando se libera una tecla.
Pgina 50

XHTML (11)
Eventos de ratn
onclick: al hacer clic con el ratn. ondblclick: al hacer doble clic con el ratn. onmousedown: al presionar el botn del ratn. onmousemove: cuando se mueve el puntero del ratn. onmouseout: cuando el puntero del ratn se mueve fuera de un elemento. onmouseover: cuando el puntero del ratn se mueve sobre un elemento onmouseup: al liberar el botn del ratn.

Pgina 51

CSS
Los elementos de HTML permiten a los autores de pginas Web marcar la estructura de un documento La especificacin de HTML sugiere cmo se debieran representar los elementos en un navegador
Por ejemplo, <strong> suele mostrarse en negrita, <h1> suele mostrarse en un tipo de fuente mayor...

Pero no son ms que eso, sugerencias Las hojas de estilo (CSS) nos dan control total sobre el diseo de la pgina Web

Reglas y hojas de estilo

Una regla define algn aspecto del estilo de uno o varios elementos h1 { color: green; } Una hoja de estilo es un conjunto de reglas que se aplican a un documento HTML

Anatoma de una regla

h1
SELECTOR

{ color: green; }
DECLARACIN

Una regla consta de dos partes:

Selector la parte antes de la llave izquierda Declaracin lo que va entre llaves

Agrupando reglas y selectores

Una de las metas de CSS era la brevedad
Facilita escribir la hoja de estilo a mano Reduce el tiempo de carga

Por ejemplo, sean las siguientes reglas: h1 { font-weight: bold; } h2 { font-weight: bold; } h3 { font-weight: bold; } Como las declaraciones son idnticas, se pueden agrupar: h1, h2, h3 { font-weight: bold; }

Agrupando reglas y selectores

Un selector puede tener ms de una declaracin: h1 { font-weight: bold; } h1 { color: green; } Podemos agrupar las declaraciones en una lista separada por puntos y comas: h1 { font-weight: bold; color: green; }

Elemento style
Se puede meter el estilo en el propio documento HTML
<html> <head> <title>...</title> <style type=text/css> <!-h1 { color: green; } --> </style> </head> <body> ...

Problema: slo afecta a un documento HTML

Elemento <link>
<html> <head> <title>...</title> <link rel=stylesheet type=text/css href=miestilo.css/> </head> <body> ... </body> </html>

Clases e identificadores
Son atributos que tienen todos los elementos de HTML y que permiten crear potentes selectores
Atributo class Atributo id

Clases
Permite crear grupos de elementos a los que se va a aplicar el mismo estilo
<p class=importante>...</p> ... <span class=importante>...</span>

Los nombres de clases deben ser una sola palabra, aunque pueden tener dgitos y guiones:
codigo-fuente, nombre2, etc.

Los nombres de clases diferencian entre maysculas y minsuculas

Hay que escribirlos en la hoja de estilo igual que la pgina HTML

Clases en la hoja de estilo

La forma de referirse a las clases en la hoja de estilo es anteponiendo un punto al nombre de la clase
.importante { color: red; }

Identificadores
<div id=logo>...</div>

El valor de un atributo id debe ser nico en el documento Desde la hoja de estilo, nos referimos a ellos con una almohadilla:
#logo { ... }

Combinar tipos de selectores

Hasta ahora hemos visto tres tipos de selectores:
Selectores de tipo Selectores ID Selectores de clase

stos pueden combinarse:

p.importante { color: red; }

Selectores contextuales
No slo debe coincidir el elemento, sino el contexto en el que aparece Supongamos que tenemos:
h1 em { color: red; } { color: red; }

Podramos aadir esta otra regla:

h1 em { color: blue; }

Pseudo-clases y pseudo-elementos
Permiten lograr algunos efectos deseados por los diseadores y que no se pueden conseguir con las etiquetas HTML ni con las clases Ejemplos de pseudo-clases:
Los enlaces: visitados, no visitados, encima...

Ejemplos de pseudo-elementos:
La primera letra de un elemento, la primera lnea, aadir elementos no presentes en el documento fuente...

Ni los pseudo-elementos ni las pseudo-clases existen en HTML

Pseudo-clases de enlaces
Permiten saber el estado en que se encuentra un enlace
a:link { text-decoration: none; }

NOMBRE DE LA PSEUDO-CLASE CARCTER DE SEPARACIN TIPO DE ELEMENTO

Pseudo-clases de enlaces
a:link { text-decoration: none; }

El selector es una combinacin de un selector de tipo y una pseudo-clase

De momento, el HTML slo tiene como enlace la etiqueta <a>

El carcter de separacin son los dos puntos (:)

Pseudo-clases de enlaces. Tipos

No visitado Visitado Cursor encima
Activo

:link :visited :hover

:active

a:link, a:visited a:hover

{ text-decoration: none; } { text-decoration: underline; background-color: yellow; }

Ejercicio
Primero, comentaremos en clase unas pocas de las mltiples propiedades de CSS A continuacin, aplicar una hoja de estilo externa a la pgina del ejercicio anterior para intentar que quede, ms o menos, como sigue: