Programacion web se

Programación Web

Curso

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. I

Programación Web

Bienvenida

Ahora que ya conoces la programación orientada a objetos, tienes la capacidad de
desarrollar diversas aplicaciones.

En este módulo tendrás la oportunidad mostrar que eres una persona exitosa,
capaz de enfrentar retos que requieren iniciativa y creatividad en el desarrollo de
programación Web y de utilizar nuevas herramientas con las que podrás crear
aplicaciones cliente-servidor.

Agradecimiento y Reconocimiento

Después de una ardua tarea de investigación se ha logrado la creación de una
obra vasta en conocimiento en el desarrollo de las Tecnologías de la Información y
Comunicación.

La presente obra no hubiera sido posible sin la valiosa aportación de destacados
autores y especialistas en la materia. Es por ello que a manera de reconocimiento
queremos agradecer su participación:

PROGRAMACIÓN WEB
Mtro. Pedro Bello López
Benemérita Universidad Autónoma de Puebla

Ing. Yalú Galicia Hernández
Benemérita Universidad Autónoma de Puebla

Introducción
En el mundo están sucediendo grandes cambios que hacen que las personas se
adentren más en la tecnología. Es por eso que el curso de Programación Web
está desarrollado para que seas impulsor de este cambio.

Como primer paso veremos los elementos de la arquitectura de Internet, después
la forma en que se desarrollan los sitios Web, considerando los aspectos de
programación, así como las aplicaciones en la vida moderna, tomando en cuenta
siempre a las personas que las utilizan.

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. II

Programación Web

Este módulo tiene dos enfoques de desarrollo, De acuerdo a tus intereses y al
finalizar el capítulo 2, podrás elegir el enfoque que prefieras para trabajar durante
el curso (cada enfoque abarca 3 capítulos). Al finalizar estos, concluiremos con el
capítulo 6, en donde podrás aplicar cualquiera de los dos enfoques en
aplicaciones reales.

Esperamos que muestres la iniciativa y responsabilidad que en otros cursos para
que aproveches tus habilidades de la mejor forma posible en este curso.

Recuerda que tu tutor tiene un compromiso de honestidad, responsabilidad y
lealtad contigo, al igual con las personas con las que interactúas.

Intenciones Educativas
En este curso se pretende que obtengas las habilidades y los conocimientos
necesarios para proponer soluciones Web originales, basadas en el
autoaprendizaje y la reflexión, asumiendo actitudes de honestidad,
responsabilidad y confidencialidad.

Además, el curso de programación Web está encaminado a desarrollar tu
creatividad para obtener productos de software que proporcionen un servicio de
calidad.

Objetivos
GENERALES

Al finalizar el curso serás capaz de aplicar las diferentes herramientas y lenguajes
de programación en Internet para el desarrollo de aplicaciones Web.

ESPECIFICOS

Conocerás la arquitectura de desarrollo en Internet.
Podrás desarrollar aplicaciones Web en la plataforma que elijas
Aplicarás las herramientas para crear páginas Web estáticas, dinámicas y activas.
Vincularás bases de datos dentro de las aplicaciones Web.
Aplicarás los conocimientos adquiridos en el desarrollo de un sitio Web.

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. III

Programación Web

Metodología

En el curso de POO utilizaremos distintas técnicas de aprendizaje para cubrir los
contenidos. A continuación encontrarás una breve descripción de dichas técnicas.
Adicionalmente, en las actividades de aprendizaje podrás encontrar las
indicaciones específicas en relación con la técnica utilizada en cada una de ellas.

APRENDIZAJE BASADO EN PROBLEMAS (ABP)

La técnica de Aprendizaje Basado en Problemas (ABP, ó del inglés “PBL-Problem
Based Learning”) es una técnica didáctica constructivista. La cual consta de los
siguientes pasos:

1. El docente formará grupos de alumnos que trabajarán en equipo para resolver
el problema del escenario propuesto. Se nombrará un secretario por equipo, el
cual organizará el funcionamiento del mismo y se encargará de enviar los
resultados de las actividades realizadas al profesor.

2. El docente presentará el material del escenario, asignará roles y unificará
criterios.

3. Los estudiantes elaborarán una serie de preguntas respecto al escenario;
posteriormente, procurarán resumir el problema del escenario planteándolo (de ser
posible) en forma de una sola pregunta. El docente verificará que tal pregunta sea
la apropiada.

4. Una vez establecida la pregunta principal y las preguntas particulare s, los
estudiantes analizarán y seleccionarán en equipo las preguntas más relevantes a
investigar.

5. Como primer entregable, cada estudiante entregará un reporte individual
correspondiente a una investigación hecha por él mismo.

6. Posteriormente, ya en equipo, lo integrantes discutirán en equipo los resultados
de su investigación para establecer en común las respuestas a las preguntas
planteadas.

3. Finalmente, como segundo y último entregable, cada integrante entregará un
reporte individual, más sin embargo, este deberá reflejar los aspectos puestos
en común en la discusión en grupo. Adicionalmente, en algunos casos de
programación, se solicitarán la entrega de programas.

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. IV

Programación Web

MÉTODO DE CASOS

El método de casos es diferente a otros sistemas de enseñanza porque a
diferencia de los sistemas tradicionales exige que se tome parte activa en el
análisis de los problemas y en la determinación de alternativas o cursos de acción
en situaciones reales muy específicas.

El método de casos te pondrá en roles que implican toma de decisiones. Un punto
muy importante del método es el análisis del caso ya que permite aprender, a
través de la experiencia de otros casos similares para tú toma de decisiones. Entre
más casos se resuelvan, mayor será tu habilidad para identificar los problemas y
formular soluciones de la vida real, lo cual es de vital importancia, ya que no son
situaciones inventadas.

En el método de casos, las decisiones que se tomen y el proceso que se siga para
tomar decisiones es la clave, desarrollando habilidades para la toma de
decisiones, y que pueda sustentar mediante un análisis adecuado, aprendiendo en
el proceso a comunicar tus criterios, a defender los hechos y opiniones en
debates.

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. V

Programación Web

Los pasos a seguir en el método de casos se muestran en el siguiente diagrama:

COMPROBACIONES DE LECTURA

La técnica de comprobación de lectura tiene como finalidad fomentar en el alumno
la habilidad de leer, analizar y comprender. La comprensión que realices, se
reflejará al final de cada lección, ya que se presenta una evaluación por medio de
preguntas muy puntuales acerca de la lectura.

Fuentes de Información

Aquí podrás encontrar algunas ligas a Internet que te apoyarán en tu aprendizaje
de los diferentes temas que forman este curso

Arquitectura de Internet

• Tutorial TCP/IP
http://ditec.um.es/laso/docs/tut-tcpip/3376fm.html
• Otro Tutorial sobre TCP/IP
http://www.saulo.net/pub/tcpip/
• Algunos conceptos de Cliente -Servidor
http://www4.uji,es/%7Eal019803/tcpip/index.htm
• Modelo Cliente-Servidor
http://www.juntadeandalucia.es/averroes/recursos_informaticos/curso_inter
net/curso/interne4.htm

ASP.NET

• Universidad .NET
http://www.microsoft.com/spanish/msdn/comunidad/uni.net/

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. VI

Programación Web

• Tutorial de ASP.NET
http://samples.gotdotnet.com/quickstart/aspplus/doc/default.aspx

Reglas del Juego y Sistema de Evaluación

Cada capítulo incluye diferentes actividades planeadas para reforzar tu
aprendizaje. Estas actividades podrán ser:

* Resolver cuestionarios
* Realizar alguna investigación
* Elaborar el diseño de alguna interface
* Escribir programas o hasta una aplicación completa.

Siempre y cuando la actividad se entregue en el tiempo y forma descrito en la
misma actividad, podrá obtener el 100% del porcentaje total asignado e indicado
en la forma de evaluación de la actividad.

La suma de los porcentajes de las diferentes actividades suma el 100%, que
corresponde al 100 en el curso.

Los trabajos (investigaciones, programas, proyectos, etc) que serán enviados al
tutor deberán seguir el formato que se indica a continuación:

Investigaciones:
invN_matricula.doc
Donde N indica el número de investigación

Programas
progN_matricula.ext

Donde N indica el número de programa y ext la extensión del archivo (.aspx,
.aspx.cs, etc.)

Proyectos (en archivo Zip)
proyN_matricula.zip

Donde N indica el número de proyecto

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. VII

Programación Web

Contenido

BIENVENIDA.....................................................................................................................................................................II
INTRODUCCIÓN .............................................................................................................................................................II
INTENCIONES EDUCATIVAS .................................................................................................................................III
OBJETIVOS......................................................................................................................................................................III
METODOLOGÍA ............................................................................................................................................................ IV
FUENTES DE INFORMACIÓN.................................................................................................................................VI
REGLAS DEL JUEGO Y SISTEMA DE EVALUACIÓN................................................................................VII
1. ARQUITECTURA............................................................................................................................................... 1
1.1. ARQUITECTURA (COMO FUNCIONA EL INTERNET Y SERVICIOS QUE PROPORCIONA).......................1
1.2. A RQUITECTURA CLIENTE -SERVIDOR .............................................................................................................8
2. DISEÑO DE PÁGINAS................................................................................................................................ 12
2.1. LENGUAJE DE MARCAS..................................................................................................................................12
2.1.1. HTML ........................................................................................................................................................ 12
2.1.2. XML ........................................................................................................................................................... 22
2.2. ELEMENTOS M ULTIMEDIA ............................................................................................................................29
2.2.1. Imágenes, Video y Sonido..................................................................................................................... 29
2.2.2. Animaciones ............................................................................................................................................. 32
3. FORMULARIOS WEB ..................................................................................................................................37
3.1. INTRODUCCIÓN ...............................................................................................................................................37
3.2. CONTROLES DE SERVIDOR ............................................................................................................................53
3.3. CONTROLES DE USUARIO ..............................................................................................................................78
3.4. A CCESO A DATOS ...........................................................................................................................................85
3.5. TRABAJO CON OBJETOS..............................................................................................................................149
4. SERVICIOS WEB .........................................................................................................................................158
4.1. INTRODUCCIÓN ............................................................................................................................................158
4.2. ESCRITURA DE SERVICIOS WEB ................................................................................................................182
4.3. UTILIZACIÓN DE DATOS EN SERVICIOS WEB...........................................................................................184
5. OPTIMIZACIÓN DE APLICACIONES WEB ...............................................................................185
5.1. ESTADO DE LA APLICACI ÓN .......................................................................................................................185
5.2. SERVICIOS DE CACHÉ..................................................................................................................................198
5.2.1. Usando el objeto caché........................................................................................................................198
5.2.2. Almacenamiento en caché de los resultados de página..................................................................198
5.2.3. Almacenamiento en caché de fragmentos de página ......................................................................199
5.3. CONFIGURACIÓN..........................................................................................................................................207
5.3.1. Formato del archivo de configuración..............................................................................................207
5.3.2. Recuperar la configuración .................................................................................................................207
5.4. SEGURIDAD...................................................................................................................................................215
5.4.1. Autenticación y Autorización..............................................................................................................215
5.4.2. Autenticación basada en Windows.....................................................................................................216
5.4.3. Autenticación basada en formularios................................................................................................216
6. APLICACIONES DE SITIOS WEB ....................................................................................................231

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. VIII

Programación Web

1. Arquitectura
1.1. ARQUITECTURA (Como funciona el Internet y servicios que
proporciona)

1. Lea detalladamente el siguiente escenario:

Escenario Arquitectura (que es Internet)

Silvia una empresaria de mucho éxito en la venta de servicios de recursos
humanos en los años 80’s y principios de los 90’s después de darle de beber leche
a su linda gatita partió a su oficina, en donde también labora su hijo Bebo, el cual
tiene mucho interés en que la empresa de su madre continué con el éxito que ha
tenido ya que a últimas fechas la cartera de clientes se ha mantenido y va
disminuyendo la demanda de sus servicios en lugar de aumentar, su madre es
una persona emprendedora pero por su edad no es tan fácil convencerla del uso
de la tecnología ya que siempre ha pensado que el trato personal en el área de
recursos humanos es lo que cuenta, por tal motivo Bebo ha decidido que tiene que
convencer a su madre de ofrecer algún servicio innovador dentro del área de
recursos humanos a fin de poder mantener he incrementar su cartera de clientes
para poder lograrlo, piensa que lo primero que debe hacer es convencer a Silvia
de ¿Cómo funciona el Internet y los servicios que puede proporcionar? por tal
motivo decido tomarse un tiempo de 4 hrs.

En la que mostró las bondades del Internet a Silvia ya que entro a sitios de
Internet donde consulto información, compro un producto, contesto su mail, bajo
información de productos que quería comprar y cada operación y/o consulta que
hacia le explicaba ampliamente a Silvia. Al terminar su sesión demostrativa Silvia
continuo con su trabajo cotidiano y camino a casa recordó lo sucedido con su hijo
y pensaba que ella debería conocer un poco mas del tema y así reconsideraría la
petición de Bebo de darle la oportunidad de realizar una aplicación en el área de
R.H.

Después de cenar y antes de conciliar el sueño por su mente solo pensaba como
funciona eso de Internet, que se requiere para que funcione y que puedo hacer
con el Internet….

2. Con base en el escenario, y trabajando en equipo, elabora una serie de
preguntas sobre como ayudar a Silvia para que pueda disipar sus dudas. Elijan las
10 que consideren más relevantes y el secretario del equipo deberá colocarlas
tareas Preguntas Arquitectura "metas de aprendizaje". 1.1

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 1

Programación Web

3. Una vez que tengan el visto bueno del profesor sobre sus preguntas, lleva a
cabo una investigación individual, que deberás colocar en tareas: Resumen
individual Arquitectura 1.1 y te será calificado con la rúbrica de Resumen
individual

5. Una vez que tengan la aprobación del profesor deberán elaborar una propuesta
de solución a la pregunta de su definición del problema, así como su reporte el
cual colocarás en Resumen por equipo Arquitectura 1.1, en donde se incluirá
dicha propuesta y una síntesis de las respuestas a sus preguntas relevantes
finales hechas en Preguntas Arquitectura "metas de aprendizaje". 1.1
El contenido del reporte debe cumplir con la siguiente rúbrica Resumen equipo

Guía Tutorial, Arquitectura-cliente servidor

1. Materia: Programación Web
2. Tema: Arquitectura-Como funciona Internet y servicios que proporciona
3. Objetivos de aprendizaje:
Poder describir la tecnología del Web
4. Escenario:

Escenario Arquitectura (que es Internet)

Silvia un empresaria de mucho éxito en la venta de servicios de recursos humanos
en los años 80’s y principios de los 90’s después de darle de beber leche a su
linda gatita partió a su oficina, en donde también labora su hijo Bebo, el cual tiene
mucho interés en que la empresa de su madre continué con el éxito que ha tenido
ya que a últimas fechas la cartera de clientes se ha mantenido y va disminuyendo
la demanda de sus servicios en lugar de aumentar, su madre es una persona
emprendedora pero por su edad no es tan fácil convencerla del uso de la
tecnología ya que siempre ha pensado que el trato personal en el área de
recursos humanos es lo que cuenta, por tal motivo Bebo ha decidido que tiene que
convencer a su madre de ofrecer algún servicio innovador dentro del área de
recursos humanos a fin de poder mantener he incrementar su cartera de clientes
para poder lograrlo, piensa que lo primero que debe hacer es convencer a Silvia
de ¿Cómo funciona el Internet y los servicios que puede proporcionar?

Después de cenar y antes de conciliar el sueño por su mente solo pensaba como
funciona eso de Internet, que se requiere para que funcione y que puedo hacer
con el Internet….

5. Posibles términos q ue deban clarificarse:

6. Definición del problema esperada:
¿Como funciona el Internet?

7. Preguntas esperadas en el análisis del problema:


Programación Web

¿Que requerimientos de software se necesitan para usar el Internet?
¿Qué req uerimientos de hardware se necesitan para hacer un sitio de Internet?
¿Qué servicios proporciona el Internet?
¿Qué es un servicio?
¿Qué es el correo electrónico?
¿Qué es la mensajeria?
¿Hay seguridad al trabajar en la Web?
¿Qué tan factible es construir aplicaciones Web?
¿Cuánto cuesta construir esto?

8. Metas de aprendizaje:
¿Que requerimientos de software se necesitan para usar el Internet?
¿Qué requerimientos de hardware se necesitan para hacer un sitio de Internet?
¿Qué servicios proporciona el Internet?

Rúbrica para evaluar el reporte de investigación individual Máximo 9 puntos.
Ver rubrica resumen investigación personal
Rúbrica para evaluar el reporte final de ABP (en equipo) por parte del tutor.
Máximo 9 puntos
Ver rubrica resumen investigación equipo

1.1 Arquitectura- TCP/IP y SERVICIOS

1. Lea detalladamente el escenario:

Escenario Arquitectura (TCP/IP)

A la semana siguiente Silvia estaba preocupa por la noticia que acaba de recibir
uno de sus exclusivos y principales clientes sin saberlo ella, desde hace tiempo lo
estaba compartiendo con un competidor eso significaba que empezaba a perder
servicios con sus mejores clientes, aunque preocupada, estaba segura de que una
nueva puerta llamada Internet se habría a su paso, así que mando llamar a Bebo y
le pidió que tomara las acciones necesarias en la elaboración de productos de
recursos humanos apoyados en la tecnología de Internet, luego recordó, que por
su preocupación no había alimentado a su gata esa mañana.

Fue así como Bebo decidió como primer paso hacer la compra de equipo de
computo, la instalación de la red interna así como hacer una pequeña página Web
que anunciará su empresa y decidió comprar 20 computadoras actuales, 1 switch
para comunicar los 2 pisos de oficinas que tenia en el edificio (piso 20 con 12
equipos y el piso 15 con 8 equipos y un servidor) se instaló el servidor de correo y
coloco algunos documentos que podrían bajar los clientes vía FTP (según el
proveedor le había dicho). Y así pudo estrenar su flamante instalación y muy
contento de poner a Silvia Consultores RH en la vanguardia de tecnología, pero a


Programación Web

pocos días tuvo varios problemas el correo a veces funcionaba y a veces no, los
clientes se quejaban de que no siempre podían bajar bien los documentos y que la
página no siempre estaba disponible que recibían un error que empezaba con algo
de http... y 2 máquinas mostraban al iniciarse un mensaje que decía IP duplicada y
ya no podían hacer uso de los servicios de red.

Bebo consulto a varios asesores, pero no entendía bien lo que le decían algunos
comentaron debes tener un servidor DHCP otros decían que bastaba con colocar
una adecuada administración de direcciones IP otros comentaban que el switch no
funcionaba y que solo con los concentradores bastaba mientras que los demás
decían que le faltaba un dominio de Internet y una dirección fija, eso era
demasiado para Bebo así que no sabía en que proveedor confiar el trabajo de los
ajustes y la afinación del equipo recién adquirido.

Así que pensó que estaba en esta indecisión por su carencia de conocimientos del
tema.

2. Con base en el escenario, y trabajando en equipo, elaboren una serie de
preguntas que ayuden a Bebo Elijan las 10 que consideren más relevantes y el
secretario del equipo deberá colocarlas tareas Preguntas Arquitectura "metas de
aprendizaje". 1.2

3. Una vez que tengan el visto bueno del profesor sobre sus preguntas, lleva a
cabo una investigación individual, que deberás colocar en tareas: Resumen
individual Arquitectura 1.2 y te será calificado con la rubrica de Resumen
individual

5. Una vez que tengan la aprobación del profesor deberán elaborar una propuesta
de solución a la pregunta de su definición del problema, así como su reporte el
cual colocarás en Resumen por equipo Arquitectura 1.2, en donde se incluirá
dicha propuesta y una síntesis de las respuestas a sus preguntas relevantes
finales hechas en Preguntas Arquitectura "metas de aprendizaje". 1.2


Programación Web

El contenido del reporte debe cumplir con la siguiente rúbrica Resumen equipo

Contenido del Excelente Bien Regular Mal
Total
reporte 3 2 1 0

Las incluye, pero Las incluye, pero
Las incluye y
Metas de difieren en algunos no coinciden con
coinciden con el No las incluye
aprendizaje puntos de las del las del resto del
resto del equipo.
resto del equipo equipo

Responde con
Les da una cierto detalle, pero No responde
Respuestas a las respuesta clara y no fundamenta Incluye de manera
metas de fundamentada en todas sus diagrama(s) completa todas
aprendizaje la bibliografía respuestas. explicativo(s) las metas de
consultada aprendizaje

Las incluye de Incluye mas de 3
Las incluye de
Referencias manera completa, referencia s
manera completa y No las incluye
bibliográficas pero no con el adicionales a las
correcta.
formato solicitado publicadas

TOTAL


Programación Web

Máximo 9 puntos.

Excelente Bien Regular Mal
Contenido del reporte Total
3 2 1 0

Dan una
Dan una solución/explica
El equipo no
solución/explicaci ción detallada al
Incluye proporciona una
Solución o explicación ón detallada al problema, pero
diagrama(s) solución/explica
al problema problema y con no la explicativo(s). ción al
fundamentos fundamentan de problema.
sólidos. manera
completa.

Únicamente
Sintetizan de Presentan un
presentan listas
Síntesis de la manera lógica y resumen lógico
de datos y/o copia
información con la cual coherente la de la
de lo que cada No la incluyen.
fundamentan la información información
solución/explicación quien investigó,
investigada por recopilada por
sin darle
todos. todos.
coherencia.

Las incluy e de
manera Incluye mas de 3
Las incluye de
Referencias completa, pero referencia s
bibliográficas manera completa No las incluye
no con el adicionales a las
y correcta.
formato publicadas
solicitado

TOTAL

Guía Tutorial Arquitectura-TCP/IP y Servicios
1. Materia: Programación Web

2. Tema: Arquitectura-TCP/IP

3. Objetivos de aprendizaje:


Programación Web

Entender el como funciona un red y sus principales servicios

4. Escenario:

Escenario Arquitectura (TCP/IP)

A la semana siguiente Silvia estaba preocupa por la noticia que acaba de recibir
uno de sus principales y exclus ivos clientes sin saberlo ella desde hace tiempo lo
estaba compartiendo con un competidor eso significaba que iba a empezar a
perder servicios con algunos de sus clientes importantes, aunque preocupada,
estaba segura de que una nueva puerta llamada Internet se habría a su paso, así
que mando llamar a Bebo y le pidió que tomaras las acciones necesarias en la
elaboración de productos de recursos humanos apoyados en la tecnología de
Internet, luego recordó que por su preocupación no había alimentado a su gata
esa mañana.

Fue así como Bebo decidió como primer paso hacer la compra de equipo de
hardware y en la instalación de la red interna así como hacer una pequeña página
Web que anunciara a su empresa y así decidió comprar 20 computadoras
actuales, 1 switch para comunicar los 2 pisos de oficinas que tenia en el edificio
(piso 20 con 12 equipos y el piso 15 con 8 equipos y un servidor) así como instalar
la red y el servidor de correo y coloco algunos documentos que podrían bajar los
clientes vía FTP (según el proveedor le había dicho). Y así pudo estrenar su
flamante instalación y muy contento de poner a Silvia Consultores RH en la
vanguardia de tecnología, pero a pocos días tuvo varios problemas el correo a
veces funcionaba y a veces no, los clientes se quejaba n de que no siempre podían
bajar bien los documentos y que la página no siempre estaba disponible que
recibían un error que empezaba con algo de http y 2 máquinas mostraban al
iniciarse un mensaje que decía IP duplicada y ya no podían hacer uso de los
servicios de red.

Bebo consulto a varios asesores pero no entendía bien lo que le decían algunos
comentaron debes tener un servidor DHCP otros decían que bastaba con colocar
una adecuada administración de direcciones IP otros comentaban que el switch no
funcionaba y que solo con los concentradores bastaba mientras que los demás
decían que le faltaba un dominio de Internet y una dirección fija, eso era
demasiado para Bebo así que no sabía a que proveedor decidir para darle el
trabajo de los ajustes y afinación del equipo acabado de comprar.

Así que pensó que estaba en esta indecisión por su carencia de conocimientos del
tema.

5. Posibles términos que deban clarificarse:

6. Definición del problema esperada:


Programación Web

¿Qué es el tcp/ip?

7. Preguntas esperadas en el análisis del problema:

¿Qué es el tcp/ip?, ¿Cuál es la red en que se basa el Internet? Estas 2 preguntas
son similares
¿Cómo trasmite información el tcp/ip?
¿Qué es el servicio de eMail?
¿Qué es el servicio FTP?

¿Qué otros servicios hay?
¿Cómo funcionan los servios de Internet FTP, HTTP, SMTP, SHTP?
¿Qué son los dominios?
¿Cómo elegir un consultor?
¿Cuánto cuesta los servicios de consultoría?

Las amarillas son preguntas que podrían surgir pero que no son tratadas como
parte del tema

8. Metas de aprendizaje:

¿Qué es el tcp/ip?
¿Cómo funcionan los servios de Internet FTP, HTTP, SMTP, SHTP?
¿Cómo trasmite información el tcp/ip?
¿Qué son los dominios?

Ver rubrica resumen investigación personal

Máximo 9 puntos.

1.2. Arquitectura cliente-servidor

Introducción

Cada día se incrementan los sitios Web con aplicaciones que demandan
funcionalidad adicional de algún tipo de procesamiento y/o almacenamiento de
datos por parte del servidor (no basta con de simplemente ver información de
páginas estáticas), nos es relativamente fácil encontrar sitios Web que permiten
registrar datos y posteriormente nos envían información de venta, también hay
servicios de búsqueda de empleo sin olvidar los 2 servicios mas conocidos que
son el Messenger y el e-mail, estos sistemas en su gran mayoría siguen el
siguiente comportamiento.


Programación Web

En el servidor se guarda la información y es ahí donde se realizan las operaciones
de base de datos.

El cliente (usuario) desde su navegador (browser) activa el proceso de dar de alta
sus datos, de hacer modificaciones o de consultar alguna información y
posteriormente ver el resultado de cada operación en su pantalla.

Este Web Quest tiene como finalidad comprender el modelo de programación que
aplica en el Internet para poder construir aplicaciones que demanden alguna
funcionalidad adicional de proceso en el servidor.

La Tarea

Tu eres miembro de la empresa de consultoría que llevará a cabo la asistencia
técnica a la empresa Silvia Consultores RH, tu contacto principal será Bebo (el
líder de proyecto por parte de la empresa Silvia Consultores RH) él te ha
solicitado como primer paso que le expliques detalladamente y con ayuda de
algunos diagramas el funcionamiento del modelo de programación de Internet

Tu trabajo consiste en realizar un informe en Word y lo colocarás en el foro que se
encuentra a continuación.

Debes incluir diagramas y explicaciones concisas de como funciona el modelo de
programación y los elementos de software y hardware mínimos que se requieren
para su funcionamiento.

El Proceso

Para llevar a cabo la tarea debes utilizar el mismo equipo con el que has venido
trabajando y realizar las siguientes acciones:

Consulta las ligas de "cliente servidor" en la sección de recursos y determina
cuales son los roles que desempeñan los clientes y cual el de los servidores.

En base a las ligas de "cliente servidor" indica como se realiza la comunicación
entre un cliente y un servidor y realiza un diagrama.

En base a las ligas de "cliente servidor" menciona que componentes mínimos de
hardware se requiere para que exista una comunicación de arquitectura cliente-
servidor e indique que función realiza cada uno de ellos.

En base a las ligas de "cliente servidor" indica que componentes mínimos de
software se requiere para que exista una comunicación de arquitectura cliente-
servidor e indique que función realiza cada uno de e llos.


Programación Web

En base a las ligas de "llamado de una página Web" realiza un diagrama que
explique el proceso, que sucede cuando un usuario teclea una dirección de
Internet y al cabo de un Tiempo él puede ver la página Web que solicitó (anexe un
párrafo de al meno s 120 palabras que explique el diagrama)

Recursos

Para cliente servidor, componentes de software y hardware utiliza los siguientes
enlaces:

http://www.inei.gob.pe/biblioineipub/bancopub/inf/lib5038/carac.HTM

http://www.inei.gob.pe/biblioineipub/bancopub/inf/lib5038/indice.HTM
http://docs.hp.com/es/5990-8174/ch02s01.html#chcbdiac

http://www.monografias.com/trabajos24/arquitectura-cliente -servidor/arquitectura-
cliente -servidor.shtml

http://www.htmlweb.net/manual/basico/internet_2.html

http://www.geocities.com/aula_web/inter03.html

http://agamenon.uniandes.edu.co/~revista/articulos/cliser.html

Para comprender como se procesa el llamado de una página Web consulta los
siguientes enlaces:

http://es.wikipedia.org/wiki/HTTP

http://www.brujula.net/wiki/Capa_de_aplicaci%C3%B3n

http://eia.udg.es/~ramon/ib/t3/tema3.htm#punto32

http://cdec.unican.es/libro/HTTP.htm


Programación Web

Evaluación
Se evaluará el trabajo en equipo de acuerdo a la siguiente rúbrica.

Excelente Bien Medio Incompleto
3 2 1 0
Contenido Explicaciones Explicaciones de Explicaciones El equipo no
completas de todos todos los puntos incompletas ,faltan presenta alguna
los puntos y fundamentos explicación del
proporciona problema
información adicional
Orden y Trabajo bien Buen orden y que Problemas con el orden No existe un
organización ordenando y las explicaciones y/o clasificación de las orden en las
redacciones precisas concuerden con explicaciones y ideas y estás no
que coincidan con los diagramas presenta problemas de coinciden con
los diagramas concordancia con los los diagramas
diagramas propuestos
Diagramas Los diagramas y/o Contiene Los diagramas y/o Ausencia de
gráficos y dibujos son claros y bastantes gráficos dibujos son algo diagramas o no
tablas ayudan al y diagramas difíciles de entender. se pueden
entendimiento de la entender
arquitectura cliente
servidor

Conclusión

Al completar esta actividad habrás entendido como funciona el modelo de
programación de Internet conocido como cliente servidor, cuales son los
componentes genéricos de software y hardware que se requieren y el proceso que
sucede desde que escribes una dirección URL en un navegador (browser) y el
servidor te devuelve la página html que solicitaste.


Programación Web

2. Diseño de Páginas

2.1. Lenguaje de Marcas

2.1.1. HTML

Objetivos

Al terminar este tema tendrás tu primera página HTML la cual será base para
añadirle más componentes en los siguientes temas.

Instrucciones

• Consulta la demostración que se encuentra ubicada en los materiales de
apoyo del curso.
• Prueba los ejemplos que se te proporcionan.
• Investiga el uso de las etiquetas que no son completamente explicadas
dentro del material del curso.
• Resuelve los ejercicios propuestos ubicados en la sección de evaluación.
Material del curso.
• Mejora los ejercicios propuestos según tu creatividad y sube tu página a un
servidor (p.e. yahoo) y envíale la dirección a tu tutor para tu evaluación.

TIP: Copia los ejemplos proporcionados para ver su resultado y después v
e
quitando pequeñas partes de código para entender mejor su uso.

Productos esperados / Evaluaciones

Construye una página Web que contenga como mínimo los siguientes puntos:

1. Historia de la computación.
Por generaciones, realizando un cuadro comparativo en el cual especificas
las características más importantes dentro de cada una, este lo puedes
realizar mediante el uso de tablas.


Programación Web

2. Precursores de la computación
Solo coloca su principal aportación a la computación e incluye imágenes de
ambos.

3. Tendencias en el desarrollo de la computación.
Estas deben ser de hardware y software.

4. Dentro de las tendencias que haz encontrado elige la que más te haya
interesado y desarróllalo.

Tu documento deberá elaborarse con frames y tener el siguiente formato:

El titulo deberá tener un tamaño lo suficientemente grande para llamar la atención,
pero sin descuidar los tips que se te proporciona n posteriormente para un buen
diseño. Además de contener una imagen o bien, un logotipo.

El índice, contendrá las ligas a los temas preestablecidos de manera tal que su
contenido se visualice en el frame de información.

Si lo consideras pertinente puedes añadir más información con la finalidad de
hacer más completa tu página.

Este tema se evaluará con la página enviada a tu tutor y contará el 2.5% de la
calificación final, siempre y cuando lo entregues en la fecha y forma acordada.

Esta actividad se considerará como exitosa si el resultado de la evaluación
realizada por tu tutor es arriba de 70/100.


Programación Web

Material de Apoyo

Consulta el material de apoyo y realiza todas las actividades que se indican.

En la siguiente presentación podrás conocer las bases para elaborar un
documento HTML.

GUÍA BÁSICA DE HTML

ESTRUCTURA DE UN DOCUMENTO HTML

• La estructura básica de un documento HTML se compone de una etiqueta
de inicio <HTML> y una de fin </HTML>.

• Otros componentes esenciales de este tipo de documento son la cabecera
la cual contiene información sobre el documento, y se indica por las
etiquetas <HEAD> y </HEAD>; dentro de la cabecera se recomienda el uso
de la etiqueta <TITLE>, la cual se encarga de indicar el título del
documento, generalmente lo puedes ver en la parte superior del navegador.

• El cuerpo es indicado por las etiquetas <BODY> y </BODY>.

Un ejemplo básico de un documento HTML es el siguiente:

<HTML>
<HEAD>
<TITLE>Mi primera página web </TITLE>
</HEAD>
<BODY>
MI PRIMERA PÁGINA WEB
</BODY>
</HTML>

En tu página puedes establecer un fondo, ya sea que lo predefinas de un color o
bien mediante una imagen, esto se realiza con el atributo BACKGROUND de la
etiqueta BODY

<body background="nieve.jpg">
<body background color: #F00 >

Programación Web

COMENTARIOS

Con la finalidad de documentar tu página puedes insertar algunos comentarios en
los que especificas donde comienza la página o bien quien es el autor de la
misma, por ejemplo

<!—Este es un comentario-->

Esta parte del código no se vera en el documento.

FUENTES

La etiqueta controla casi en su totalidad el estilo del texto a utilizar. Tiene
tres atributos <SIZE> mediante el cual se establece el tamaño de la fuente,
<FACE> esta se encarga de establecer la fuente, <COLOR> establece color al
texto.
La etiqueta requiere de un delimitador, por ejemplo si utilizas deberás cerrar con .

Los tamaños del texto van del 1 al 7, y los colores deben ser especificados en
ingles.

P.e. 

ESTRUCTURA DEL TEXTO

PÁRRAFOS Y SALTOS DE LÍNEA

Dentro de un documento HTML cualquier salto de línea o tabulación y demás
separadores son ignorados por el navegador de tal manera que si deseas separar
tu texto en párrafos deberás colocar la etiqueta y su respectivo delimitador
. Otra etiqueta que se encarga de separar el texto es la del salto de línea
 , la cual funciona como retorno de carro.

ESTILOS DE TEXTO

A continuación se presentan los estilos de texto usados frecuentemente:

• Se utiliza para mostrar el texto en negrita.
• Se utiliza para subrayar el texto.
• Se utiliza para mostrar el texto en cursiva.
• Texto pequeño, esto es, se muestra el texto en el menor tamaño
de fuente.

Programación Web

• <BIG> Texto grande, como su nombre lo indica el texto es mostrado en el
tamaño máximo de fuente.
• <CENTER> Centra el texto en la pantalla.

A continuación se proporciona un ejemplo que abarca todo lo visto con
anterioridad:

<HTML>
<HEAD>
<TITLE> Mi primera página WEB </TITLE>
</HEAD>
<BODY>
Este texto esta en verde,
con fuente arial, en negrita y tamaño 5. 
<CENTER>Este es un párrafo
centrado.</CENTER>
</BODY>
</HTML>

TABLAS

ESTRUCTURA DE UNA TABLA EN HTML

Para definir una tabla dentro de una página Web creada con lenguaje HTML,
utilizaremos las etiquetas <TABLE> y </TABLE> y dentro de ellas definiremos el
inicio y fin de cada una de sus celdas haciendo uso de la etiqueta <TD> y </TD>,
además usaremos a las etiquetas <TR> y </TR> para indicar el inicio y fin de una
fila dentro de una tabla.

Dentro de la etiqueta TABLE también podemos utilizar los atributos WIDTH y
HEIGHT para indicar la anchura y la altura de la tabla respectivamente, también es
posible agregar color de fondo mediante el atributo BGCOLOR.

También podemos variar la separación entre celdas mediante el atributo
CELLSPACING de la etiqueta TABLE.
A continuación te presentamos un ejemplo:

<HTML>
<HEAD>
<TITLE> EJEMPLO DE USO DE TABLAS </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3 CELLSPACING=5 CELLPADDING=10 WIDTH=500
ALIGN="CENTER" VALIGN="CENTER" GCOLOR=yellow>
<CAPTION ALIGN=bottom>Horario de servicio social </CAPTION>

Programación Web

<TR><TH>Lunes</TH><TH>Martes</TH><TH>Miercoles</TH><TH>Jueves</TH
><TH BGCOLOR=blue>Viernes</TH>
</TR>
<TR>
<TD BGCOLOR=gray>4</TD><TD
BGCOLOR=green>2</TD><TD>6</TD><TD>2</TD><TD>2</TD>
</TR>
<TR>
<TD BGCOLOR= red>6</TD><TD
BGCOLOR=orange>6</TD><TD>4</TD><TD>4</TD><TD>4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
ENLACE
S

ESTRUCTURA DE ENLACE

Un enlace está conformado por la etiqueta <A> seguida por diferentes atributos
que indican el tipo de enlace que se desea hacer.
Existen dos tipos de enlaces:

• Enlace a un punto de la misma página: Usando el atributo NAME, podemos
indicar a qué parte del documento queremos ir, p.e. inicio de la página y
final de la página.
• Enlace a otra página: Usando el atributo HREF podemos hacer ligas a otra
página del mismo sitio.
• Enlace a otros sitios: Usando el atributo HREF también podemos hacer
enlaces a otros sitios Web o direcciones de correo.

Esta línea se coloca al principio del cuerpo del documento.
<A HREF="#finaldocumento">Da click aquí para ir al final de esta página </A>

Esta línea va al final
<A HREF="#iniciodocumento">Da click aquí para ir al inicio de esta página </A>

Estas líneas van donde tú lo desees
<A HREF="http://www.google.com">Google.com</A>
<A HREF="mailto: carlos-puebla@yahoo.com">carlos-puebla@yahoo.com</A>

IMÁGENE S

Como se ha mencionado anteriormente dentro de un documento html es común el
uso de etiquetas. Para incluir una imagen en una página Web emplearemos la
etiqueta <IMG> junto con un atributo fundamental SCR.

Programación Web

Deberás colocar la siguiente línea de código dentro del cuerpo de tu documento
html.
<IMG SRC=“paraiso.jpg"> donde nombre de imagen como su nombre lo indica es
el nombre de la imagen que deseas incluir en la página.

MARQUESINAS

Mediante HTML se pueden crear marquesinas con el uso de la etiqueta
<MARQUEE> y su delimitador </MARQUEE>; dentro de ellas se pone el texto que
se desea, en el formato que se quiere, por ejemplo:

<MARQUEE> ESTA ES UNA MARQUESINA</MARQUEE>

Esta etiqueta tiene varios atributos, te mostramos los más usados:

• BEHAVIOR=ALTERNATE: la marquesina "rebotará" de un lado a otro de
la pantalla.
• SCROLLDELAY = X: Indica el tiempo que transcurrirá entre cada salto
del texto, expresado en milisegundos.
• LOOP = Indica el número de veces que se repetirá la acción de la
marquesina, por default es infinita.

LISTAS

En una página Web puedes elaborar listas, mediante la etiqueta <OL> y con el
atributo <type>, este último permite establecer el tipo de lista a crear. Por ejemplo
si deseas crear una lista enumerada deberás colocar el siguiente código:

<OL TYPE=1><OL>
<li>Presentación.
<li><A HREF="introduccion1.html">Introducción a los sistemas
operativos.</A>
<li>Casos de Estudio.
<OL TYPE=1>
<li><A HREF="http://www.cs.buap.mx/~fulo">Linux.</A>
</ol>
<li><A HREF="Glosario.html">Glosario.</A>
</ol>

Checa que en cada renglón se establece la etiqueta <li>, la cual indica que es
parte de la lista numerada.

Programación Web

SONIDO

Dentro de una página Web se pueden incorporar diversos sonidos con la opción
de poder ser activada por el usuario o bien ser ejecutada de manera automática al
cargar la página.

Para este fin se utiliza la etiqueta <BGSOUND> asociada al atributo SRC (source).
Los archivos a reproducir pueden ser de los siguientes formatos: *.wav, *.au, *.mid

El atributo que acompaña a esta etiqueta es LOOP, el cual se encarga de
especificar cuántas veces se debe ejecutar el archivo de sonido y puede tener un
valor numérico o valor infinite que reproducirá el archivo en un ciclo cerrado. Por
ejemplo:
<BGSOUND SRC=“musica.wav” LOOP=infinite>

FRAMES

Un frame es un marco que divide la pantalla en filas y columnas como lo
deseemos.
El atributo que debemos conocer para la realización de los frames es TARGET, el
cual determina la zona de la pantalla en donde se mostraran los elementos.
Ya que el atributo TARGET determina el lugar de destino del contenido, hay que
señalar los valores especiales de este atributo.

1. TARGET = _blank. El enlace se carga en una nueva ventana.
2. TARGET = _self. El enlace se carga en la misma ventana en que se
encuentra.
3. TARGET = _parent. El enlace se carga en el FRAMESET inmediatamente
superior al documento.
4. TARGET = _top. El enlace se carga en la totalidad de la ventana.

Estructura básica

Debemos resaltar que el código principal de una página con frames no presenta
las etiquetas <BODY> y </BODY>, sino que el código deberá ser incluido en las
etiquetas <HEAD> y </HEAD>

La etiqueta a utilizar es la de <FRAMESET>, esta última se encarga de dividir la
pantalla en ventanas, verticales u horizontales. Y los atributos que determinan el
aspecto de estas ventanas son ROWS y COLS.

El atributo ROWS define el número de divisiones verticales, así mismo con COLS
pero la hace de manera horizontal.

Programación Web

• Los valores para ambos pue den ser absolutos en píxeles, porcentajes, o
bien valores de escala relativos, y se basan en los siguientes formatos.

• n. Cuando se introduce un valor determinado se indica la altura o anchura
de la ventana en píxeles.

• %. Indica que la altura o anchura e s un valor porcentaje relativo al tamaño
de la ventana que lo contiene.

• *. Indica que debe asignarse ala ventana todo el espacio disponible;
suponiendo que haya varias ventana es espacio libre se divide entre ellas,
si existe un valor delante del asterisco, la ventana que lo tenga asignado
tomará más espacio relativo, por ejemplo “2*,*” daría 2/3 del espacio de la
primera ventana.

La etiqueta <FRAME> y <NOFRAME>

La etiqueta <FRAME> es la encargada de revisar cuantos frames se deberán
dibujar dentro de la pantalla, por lo que puede tener hasta seis atributos distintos,
como por ejemplo:

• SCR = “url” toma el valor URL del documento que se debe mostrar en la
pantalla, sino la ventana se quedará vacía.
• NAME =“nombre de la ventana” como se indica con este atributo
nombramos a una ventana, de manera que puede ser el destino de
cualquier enlace.
• MARGINWIDTH = “valor” Se emplea para precisar el número de píxeles
entre los bordes izquierdo y derecho de la ventana.
• MARGINHEIGTH = “valor” Lo mismo que el anterior pero respecto a los
bordes superior e inferior.
• SCROLLING = “yes|no|auto” Despliega barras de desplazamiento o no.
Yes: muestra las barras, No: nunca muestra las barras; auto: hace que el
navegador decida si son necesarias o no en función del contenido de la
misma.
• NORESIZE = Indica al navegador que la ventana no puede ser
redimensionada por el usuario.

Veamos un ejemplo:

Programación Web

<HTML>
<HEAD>
<TITLE>Ejemlo de frames combinados</TITLE>
<FRAMESET COLS =“100%”, ROWS=“33%, 33%,*”>
<FRAMESET COLS=“20%,20%,20%,20%,*”>
<FRAME NAME=“Frame 1” SRC=“ejemplo.html”>
</FRAMESET>
<FRAMESET COLS=“50%,*”>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>

A continuación se presentan los ejemplos vistos dentro de la presentación:

• Ejemplos
• Ejemplo de una página sencilla.
• Tutorial de HTML

TIPS

1. El uso de muchas fuentes dificulta la lectura de la página, te recomendamos
no usar más de tres fuentes.
2. No hagas demasiado extenso el contenido de las páginas, ya que tardaría
demasiado en cargarse.
3. No utilices textos intermitentes (la etiqueta blink), ya que además de hacer
molesta la lectura distrae la atención del lector.
4. No abuses de los iconos animados, pues harás más lenta la carga de tu
página.
5. Utiliza solo las imágenes necesarias.
6. Utiliza fondos con colores claros para textos con colores obscuros y
viceversa, para no afectar la legibilidad del documento.
7. El titulo de la página debe ser lo más descriptivo posible. Puedes utilizar
marquesinas.
8. Se recomienda hacer enlaces a otras páginas con contenido similar al de la
tuya. Y revisa frecuentemente s se encuentran vigentes de lo contrario
i
retirarlas.

Programación Web

2.1.2. XML

Objetivos

En este tema identificarás los elementos básicos de un documento XML y su
interpretación, además de su diferencia con HTML y la importancia actual de
aplicaciones utilizando XML.

Instrucciones

1. Revisa la presentación de XML que se encuentra ubicada en la sección de
materiales de apoyo.

2. Una vez que hayas estudiado este tema, comprobarás tus conocimientos
contestando el cuestionario X M L que se encuentra en la entrada principal de
este capítulo. Sigue las instrucciones que ahí se te dan.


Este tema se evaluará con el cuestionario mencionado en las instrucciones y
contará el 2.5% de la calificación final, siempre y cuando lo entregues en la fecha
y forma acordada.

Esta actividad se considerará como exitosa si el resultado de la evaluación de tu
cuestionario es arriba de 70/100.

Material de Apoyo

XML

XML, lenguaje extensible de etiquetas (eXtensible Markup Lenguage), no es un
lenguaje de marcado como el lenguaje HTML. XML es un meta-lenguaje que nos
permite definir lenguajes de marcado adecuado a usos determinados.
Al ser XML un metalenguaje es un lenguaje para definir lenguajes. Los elementos
que lo componen pueden dar información sobre lo que contienen, no
necesariamente sobre su estructura física o presentación, como ocurre en HTML.
XML no ha nacido sólo para su aplicación en Internet, sino que se propone como
lenguaje de bajo nivel (a nivel de aplicación, no de programación) para intercambio
de información estructurada entre diferentes plataformas. Se puede usar en bases
de datos, editores de texto, hojas de cálculo, y casi cualquier cosa que podamos
pensar.


Programación Web

Editores de XML

Los editores son aquellos programas que nos permiten escribir los documentos
XML. Dentro de estos nos podemos encontrar los básicos como el Notepad, o
algunos más complejos, que nos permiten saber si el documento XML que
escribimos está bien formado e incluso si es válido. Es decir, realizan el parseo
automáticamente. Estos editores pueden soportar también XSL, DTDs,
SCHEMAS, HTML, XHTML, ect.
Un editor que recomendamos es el XML Spy v3.0, soporta xml, html, xsl, dtd, rdf,
schemas W3C,.... Podemos encontrar un número considerable de estos editores
en: Editores XML.

Cuales son los mejores Navegadores XML

Son las herramientas mediante las cuales podemos visualizar los documentos
XML.
La última versión de los navegadores más utilizados nos permite visualizar y
trabajar con documentos XML.

Las versiones 5 y 6 del Explorer nos permiten visualizar XML utilizando XSLT y
CSS y manipularlo utilizando DOM y JavaScript.
Las versiones 6.x de Netscape o las versiones más recientes de Mozilla, permiten
también visualizar XML utilizando CSS y DOM.

Pero además existen múltiples browsers que nos permiten visualizar algunos
vocabularios XML concretos.

El navegador CML JUMBO, que nos permite visualizar documentos CML. Este es
un lenguaje XML mediante el cual se pueden describir fórmulas moleculares y
químicas.

El Amaya Browser, mediante el cual, entre otros, podemos visualizar y crear
documentos Mathml, que es un vocabulario XML para la descripción de fórmulas
matemáticas.

Un móvil con tecnología WAP incorpora un browser capaz de mostrar páginas
WML, que no es más que un vocabulario XML desarrollado para escribir páginas
para móviles.

CREACIÓN DE DOCUMENTOS XML

Reglas básicas

Hay dos tipos de construcciones: el marcado (entre <...> ó &...;) y los datos de
carácter (todo lo demás).

Programación Web

Todo documento XML se compone de elementos. Cada elemento está delimitado
por una etiqueta de comienzo y otra de fin, a no ser que sea vacío. Los elementos
vacíos constan de una única etiqueta. Los nombres de las etiquetas son arbitrarios
y no pueden contener espacios.

Siempre hay un elemento raíz, cuya etiqueta de inicio ha de ser la primera de
todas y la de cierre la última de todas.

Cada elemento puede contener datos de carácter, elementos, ambas cosas a la
vez o puede estar vacío.

No se puede mezclar la anidación de las etiquetas: los elementos deben abrirse y
cerrarse por orden.

Los elementos pueden tener atributos (propiedades) que nos ofrecen información
sobre ellos. Los valores de los atributos deben ir entrecomillados. Tanto atributos
como valores son arbitrarios.
Mayúsculas y minúsculas no son intercambiables.
El espacio en blanco es libre, se puede utilizar para leer mejor el documento.

Estructura de un documento XML

Un documento XML tiene dos estructuras, una lógica y otra física.

A) Físicamente, el documento está compuesto por unidades llamadas entidades.
Una entidad puede hacer referencia a otra entidad, causando que esta se incluya
en el documento. Cada documento comienza con una entidad documento,
también llamada raíz.

B) Lógicamente, el documento está compuesto de declaraciones, elementos,
comentarios, referencias a caracteres e instrucciones de procesamiento, todos los
cuales están indicados por una marca explícita. Las estructuras lógica y física
deben encajar de manera adecuada:
Los documentos XML se dividen en dos grupos, documentos bien formados y
documentos válidos.

Bien formados: Son todos los que cumplen las especificaciones del lenguaje
respecto a las reglas sintácticas sin estar sujetos a unos elementos fijados en un
DTD. De hecho los documentos XML deben tener una estructura jerárquica muy
estricta y los documentos bien formados deben cumplirla.

Un objeto de texto es un documento XML bien formado si:


Programación Web

Cumple la regla denominada "document".

Respeta todas las restricciones de buena formación
Cada una de las entidades analizadas que se referencia directa o indirectamente
en el documento está bien formada.

LA REGLA “DOCUMENT”

1. Contiene uno o más elementos.

2. Hay exactamente un elemento, llamado raíz, o elemento documento, del cual
ninguna parte aparece en el contenido de ningún otro elemento.

3. Para el resto de elementos, si la etiqueta de comienzo está en el contenido de
algún otro elemento, la etiqueta de fin está en el contenido del mismo elemento.
Es decir, los elementos delimitados por etique tas de principio y final se anidan
adecuadamente mutuamente.

Válidos: Además de estar bien formados, siguen una estructura y una semántica
determinada por un DTD: sus elementos y sobre todo la estructura jerárquica que
define el DTD, además de los atributos, deben ajustarse a lo que el DTD dicte.

Aquí podemos ver un ejemplo muy sencillo:

<?xml version=" 1.0 " encoding=" UTF-8 " standalone= " yes "?>
<ficha>
<nombre> Angel </nombre>
<apellido> Barbero </apellido>
<direccion> c/Ulises, 36 </direccion>
</ficha>

Lo primero que tenemos que observar es la primera línea. Con ella deben
empezar todos los documentos XML, ya que es la que indica que lo que la sigue
es XML. Aunque es opcional, es recomendable incluirla.

Puede tener varios atributos, algunos obligatorios y otros no:

versión: Indica la versión de XML usada en el documento. Es obligatorio ponerlo, a
no ser que sea un documento externo a otro que ya lo incluía.

encoding: La forma en que se ha codificado el documento. Se puede poner
cualquiera, y depende del parser el entender o no la codificación. Por defecto es
UTF-8, aunque podrían ponerse otras, como UTF -16, US-ASCII, ISO-8859-1, etc.
No es obligatorio salvo que sea un documento externo a otro principal.

Programación Web

standalone: Indica si el documento va acompañado de un DTD ("no"), o no lo
necesita ("yes"); en principio no hay porqué ponerlo, porque luego se indica el
DTD si se necesita.

La "declaración de tipo de documento" define qué tipo de documento estamos
creando para ser procesado correctamente. Es decir, definimos que declaración
de tipo de documento (DTD) valida y define los datos que contiene nuestro
documento XML.

En ella se define el tipo de documento, y dónde encontrar la información sobre su
Definición de Tipo de Documento, mediante:

Un identificador público (PUBLIC): que hace referencia a dicha DTD.
Identificador universal de recursos (URI): precedido de la palabra SYSTEM.

Ejemplos:

<!DOCTYPE MESAJE SYSTEM "mesaje.dtd">
<!DOCTYPE HTML PUBLIC "-/ /W3C/ /DTD HTML 3.2 Final/ /EN">
<!DOCTYPE LABEL SYSTEM "http://www.ulpgc.es/dtds/label.dtd">

Espacios de nombres

Los espacios de nombres sirven para evitar las colisiones entre elementos del
mismo nombre, y en general, para distinguir los distintos grupos de elementos en
un mismo documento.
Cada espacio de nombres se asocia con una URL, que sólo sirve como
identificador único y no tiene por qué ser válida.

Terminología

Cuando un documento cumple con las reglas sintácticas que hemos descrito, se le
denomina documento bien formado.
Un documento válido, además de ser bien formado, cumple las restricciones que
le imponen una DTD o un esquema XML.

Cabecera

La cabecera, que es opcional aunque recomendable, da información sobre cómo
manejar el documento a los analizadores y otras aplicaciones. Puede contener:

Programación Web

Una declaración XML para el analizador, con la versión, juego de caracteres
utilizado, y una indicación de si el documento es o no autónomo (si requiere o no
otros documentos).

Instrucciones de proceso para otras aplicaciones.
Una declaración DOCTYPE, que referencia a la DTD que restringe el documento.

Que son los XLink y los Xpointer?

Quienes han utilizado la Web alguna vez, saben hasta qué punto es importante el
hiperenlaces. Sin embargo, no todo el mundo sabe que las nociones sobre
hiperenlaces de la Web son bastantes reducidas comparadas con los sistemas de
hipertexto comerciales y académicos. XML por si solo no puede corregir esto, pero
existen dos normas asociadas: XLINk y Xpointer que dan un paso de gigante en la
consecución de un entorno de hipertexto más avanzado.

En HTML colocamos un enlace utilizando la etiqueta... y podemos enlazar a un
único documento o al interior de este siempre y cuando este marcado con la
etiqueta: ..

La especificación XLink

Se especifica como permitir el enlace entre documentos XML.
Todavía esta en desarrollo, pero mediante esta especificación, cuando los
navegadores la implementen, se podrá:

• Utilizar cualquier elemento del XML como origen de enlace.
• Enlazar a más de un documento.
• Crear enlaces fuera del documento.
• Definir el comportamiento del enlace, etc.

La especificación XPointer

Se define la sintaxis que nos permitirá enlazar al interior de un documento XML.
Con esta nueva norma los enlaces ya no sólo serán a elementos ya marcados
sino que se permitirán enlaces del tipo:

"Enlaza a la primera aparición de la palabra Internet".

Taller de ejercicios Resueltos

<?xml version="1.0"?>
<doc xml:base="http://example.org/today/"
xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <title>Virtual Library</title>
</head>

Programación Web

<body>
<paragraph>See <link xlink:type="simple" xlink:href="new.xml">what's
new</link>!</paragraph>
<paragraph>Check out the hot picks of the day!</paragraph>
<olist xml:base="/hotpicks/"> <item> <link xlink:type="simple"
xlink:href="pick1.xml">Hot Pick #1</link> </item>
<item> <link xlink:type="simple" xlink:href="pick2.xml">Hot Pick #2</link> </item>
<item> <link xlink:type="simple" xlink:href="pick3.xml">Hot Pick #3</link>
</item>
</olist>
</body>
</doc>

Los URIs en este ejemplo son transformados en URIs completos como se indica:

"what's new" lleva al URI "http://example.org/today/new.xml"
"Hot Pick #1" lleva al URI "http://example.org/hotpicks/pick1.xml"
"Hot Pick #2" lleva al URI "http://e xample.org/hotpicks/pick2.xml"
"Hot Pick #3" lleva al URI http://example.org/hotpicks/pick3.xml

Cuestionario

Elabora el siguiente cuestionario en una presentación PowerPoint, contéstalo y
adjúntalo e n tu página realizada en el capitulo de HTML.

¿Qué es un meta-lenguaje?
¿Qué significan las siglas XML?
¿Cuáles son las aplicaciones de XML?
¿Qué es DTD?
Menciona 2 reglas básicas de la estructura sintáctica de un documento XML.
¿Cuáles son las dos estructuras de un documento XML?
¿Cuáles son los principales componentes de un documento XML?
Menciona algunos editores de XML.
Define con tus propias palabras respecto a las etiquetas, como trabaja XML.
¿Crees que es mejor XML sobre HTML? ¿Explica por que?
Determina las ventajas y desventajas de trabajar con cada uno.
Explica las diferencias entre ambos. (Elabora un cuadro comparativo)
En XML ¿cuáles son los tipos de documentos?, explícalos.
Investiga un poco más acerca de la regla DOCUMENT y explícala.
¿Qué es un XLINK y un XPOINTER?

Programación Web

2.2. Elementos Multimedia

2.2.1. Imágenes, Video y Sonido

Objetivos

Durante este tema identificarás los formatos más comunes para elementos
multimedia y experimentarás con ellos para ser utilizados en tu página HTML.

Instrucciones

1. Revisa la presentación introducción a multimedia que se encuentra ubicada
en la sección de material de apoyo del curso.
2. Realiza un trabajo de investigación de los formatos más comunes para
imágenes utilizados en Internet.
3. Cambia el formato de las 2 imágenes que se encuentran en la sección de
material de apoyo para llenar la tabla mencionada en el punto 4.
4. Una vez que hayas realizado el punto anterior, comprobarás tus
conocimientos contestando la tabla que se encuentra en la sección de
Material de Apoyo. Sigue las instrucciones que ahí se te dan.
5. Dentro de la página HTML que creaste en la sección anterior pon a prueba
tu creatividad incrustando una imagen, un video y un sonido como fondo de
tu página. Envía tu página comprimida a tu tutor para que sea evaluada.


Este tema se evaluará con la tabla y la página mencionada en las instrucciones y
contará el 5% de la calificación final, siempre y cuando lo entregues en la fecha y
forma acordada.

Esta actividad se considerará como exitosa si el resultado de la evaluación
realizada por tu tutor es arriba de 70/100.

Material de Apoyo

Aquí encontrarás el material de apoyo necesario para este tema indicado en las
instrucciones.

El término Multimedia en el mundo de la computación es la forma de presentar
información que emplea una combinación de texto, sonido, imágenes, vídeo y
animación.


Programación Web

Entre las aplicaciones informáticas multimedia más comunes podemos mencionar
juegos, programas de aprendizaje y material de referencia.

La mayoría de las aplicaciones multimedia incluyen asociaciones predefinidas
conocidas como hipervínculos o enlaces, que permiten a los usuarios moverse por
la información de modo intuitivo.

La conectividad que proporcionan los hipertextos hace que los programas
multimedia no sean presentaciones estáticas con imágenes y sonido, sino una
experiencia interactiva infinitamente variada e informativa.

Las aplicaciones multimedia son programas informáticos, que suelen estar
almacenados en CD-ROMs y claro que pueden residir en páginas de Web.

Elementos visuales

Cuanto mayor y más nítida sea una imagen, más difícil es de presentar y
manipular en la pantalla de una computadora.
Las fotografías, dibujos, gráficos y otras imágenes estáticas deben pasarse a un
formato que el ordenador pueda manipular y presentar. Entre esos formatos están
los gráficos de mapas de bits y los gráficos vectoriales.

Los gráficos de mapas de bits almacenan, manipulan y representan las imágenes
como filas y columnas de pequeños puntos. En un gráfico de mapa de bits, cada
punto tiene un lugar preciso definido por su fila y su columna.

Los gráficos vectoriales emplean fórmulas matemáticas para recrear la imagen
original.

En un gráfico vectorial, los puntos no están definidos por una dirección de fila y
columna, sino por la relación espacial que tienen entre sí.

Elementos de audio

El sonido, igual que los elementos visuales, tiene que ser grabado y formateado
de forma que la computadora pueda manipularlo y usarlo en presentaciones.

Elementos de organización

Los elementos multimedia incluidos en una presentación necesitan un entorno que
empuje al usuario a aprender e interactuar con la información.

Entre los elementos interactivos están los menús desplegables, pequeñas
ventanas que aparecen en la pantalla del ordenador con una lista de instrucciones
o elementos multimedia para que el usuario elija.


Programación Web

Las barras de desplazamiento, que suelen estar situadas en un lado de la pantalla,
permiten al usuario moverse a lo largo de un documento o imagen extensa.

Los hipervínculos o enlaces conectan creativamente los diferentes elementos de
una presentación multimedia a través de texto coloreado o subrayado o por medio
de iconos, que el usuario señala con el cursor y activa pulsándolos con el mouse.

Utiliza estas imágenes para cambiarlas en los diferentes formatos que has
investigado

Imagen 1:

Imagen 2:


Programación Web

Llena la Tabla siguiente con la información de las imágenes en sus diferentes
formatos:

GIF JPG PCX BMP TIF

Tamaño en
Bytes

Porcentaje de
deformación

Porcentaje de
pérdida de
resolución

Porcentaje de
nitidez

Toma en cuenta que deberás elaborar dos tablas, una para la imagen 1 y otra
para la imagen 2

2.2.2. Animaciones

Objetivos

En esta sección aprenderás a crear animaciones básicas útiles para la buena
presentación de tus páginas HTML.

Instrucciones

Revisa la presentación introducción a flash que se encuentra ubicada en la
sección de ma terial de apoyo del curso.
Realiza la actividad que se encuentra en la sección de Evaluaciones para realizar
una película sencilla y agrégala a tu página Web.


Elabora una película sencilla en Flash, por ejemplo, donde muestres una pelota
rebotando.


Programación Web

Pasos a seguir:

1. Una vez que haz entrado a Flash, crea un nuevo documento con el color de
fondo que más te agrade.
2. Ahora selecciona la herramienta: dibujar ovalo
3. Coloca la figura dentro del escenario, y elige el color de relleno de tu
agrado.
4. Inserta una nueva escena, en la cual debes poner nuevamente la figura,
pero en otra posición, estableciendo la secuencia de rebote.
5. Repite el paso 4 cuantas veces sea necesario.
6. Una vez terminada la película, guarda el archivo y pruébalo usando el menú
Control---TestMovie.
7. Crea una nueva liga en la página que realizaste en la sección anterior, y
anexa tu animación.
8. Dentro del Material de Apoyo podrás ver un ejemplo similar.

Para evaluar este tema:

Deberás enviar a tu tutor tu p ágina HMTL en la que incluirás las animaciones
realizadas aquí. Este trabajo representa el 7.5% de la calificación final, siempre y
cuando lo entregues en la fecha y forma acordada.

Esta actividad se considerará como exitosa si el resultado de la evaluación de tu
página es arriba de 70/100.

Material de Apoyo

Aquí encontrarás el material necesario para elaborar una sencilla animación
usando Flash. Sigue las instrucciones que se te dan en la presentación y al final
de ella tendrás una película que deberás incluir en tu página.

INTRODUCCION A FLASH

CONOCIENDO FLASH

Se te recomienda que antes de empezar a elaborar tu propia película, veas una
ya terminada que podrás encontrar dentro de la carpeta de Flash 5-- Tutorial ---
Terminado, para darte una idea de lo que puedes hacer.

Puedes seguir la siguiente ruta:

C:Archivos de programaMacromediaFlash5 TutorialFinished


Programación Web

ENTORNO DE TRABAJO DE FLASH

Para crear y editar películas, normalmente se trabaja con las siguientes funciones:
• Escenario, área rectangular en la que se reproduce la película.
• Línea de tiempo, donde se animan los gráficos respecto al tiempo
• Símbolos, componentes de los medios reutilizables de la película.
• La ventana Biblioteca, donde se organizan los símbolos
• El Explorador de películas, que ofrece una descripción general de una
película y su estructura.
• Paneles acoplables y flotantes, que permiten modificar los distintos
elementos de la película y configurar el entorno de creación de Flash para
adaptarlo a sus necesidades concretas.

ESCENARIO

Al igual que en un largometraje, las películas de Flash dividen el tiempo en
fotogramas.
En el Escenario se compone el contenido de los fotogramas individuales de la
película, dibujándolos directamente o bien organizando ilustraciones importadas.

LINEA DE TIEMPO

En la Línea de tiempo se coordina el tiempo de la animación y se ensambla la
ilustración en distintas capas. La Línea de tiempo muestra todos los fotogramas de
la película.
Las capas actúan como una serie de hojas de acetato transparente superpuesta,
manteniendo las diferentes ilustraciones por separado, de forma que puedan
combinarse distintos elementos en una imagen visual cohesionada.

SIMBOLOS

Los símbolos son elementos reutilizables que se usan en una película. Pueden ser
gráficos, botones, clips de película, archivos de sonido o fuentes.

Al crear un símbolo, éste se almacena en la Biblioteca. Al colocar un símbolo en el
Escenario, se está creando una instancia del símbolo.

VENTANA BIBLIOTECA

Aquí se guardan y organizan los símbolos creados en Flash, además de archivos
tales como archivos de sonido, imágenes de mapa de bits,etc.

En la ventana Biblioteca puedes organizar en carpetas los elementos de
biblioteca, ver con qué frecuencia se utilizan en una película y ordenarlos por tipo.


Programación Web

PANELES

Los paneles permiten ver, organizar y modificar los elementos de una película de
Flash.

• Utilizando estos paneles es posible modificar símbolos, instancias, colores,
tipo, fotogramas y otros elementos.
• También son usados para personalizar la interfaz de Flash, manteniendo
visibles los paneles necesarios para una determinada tarea y ocultando los
demás.

CREACIÓN DE UNA PELÍCULA

Ejecuta los siguientes pasos:
• Selecciona Archivo > Nuevo.
• Elige Modificar > Película: Aparecerá el cuadro de diálogo Propiedades de
película.
• En la opción Velocidad de fotogramas, introduzca el número de fotogramas
de animación que deben por segundo. La mayoría de las animaciones no
necesitan una velocidad mayor de 8 a 12 fps (fotogramas por segundo).
• En la opción Dimensiones, elija una de estas opciones:
• Introduzca valores en los campos Anchura y Altura para especificar el
tamaño del Escenario en píxeles.
• Da click en Coincidir contenido para establecer el tamaño del Escenario de
forma que el espacio que rodea el contenido sea igual en todos los lados.
• Elige un color en la muestra de colores de fondo, para establecer el color de
fondo de la película.
• Da clic en Aceptar.

ESCENAS

Para la realización de una película, son comúnmente usadas las escenas, ya que
éstas en conjunto conforman a la película.
Inserción de una escena:

Supongamos que deseas realizar una película que consta de varias escenas, por
default se abre una escena al crear un documento Flash, por lo que si deseas
crear una secuencia de escenas, deberás colocar los objetos necesarios en tu
primera escena, posteriormente inserta otra escena utilizando el menú Insertar-----
Escena.

Una vez realizado lo anterior, coloca los objetos que deseas en tu escena
siguiente, que deberán estar situados en una posición distinta a la anterior.

BARRA DE HERRAMIENTAS


Programación Web

Consta de cuatro secciones:

• La sección Herramientas contiene las herramientas de dibujo, pintura y
selección.
• La sección Ver contiene herramientas para ampliar y reducir, así como para
realizar recorridos de la ventana de la aplicación.
• La sección Colores contiene modificadores de los colores de trazo y relleno.
• La sección Opciones muestra los modificadores de la herramienta
seleccionada, que afectan a las operaciones de pintura o edición de dicha
herramienta.

Figura Barra de Herramientas.

Para seleccionar una herramienta, de clic en la herramienta que desea utilizar o
use el método abreviado del teclado para la herramienta.

Una vez seleccionada la herramienta que desea, podrá elegir uno de un conjunto
de modificadores específicos que se muestran en la parte de debajo de la barra.

Documentos flash

Un documento Flash se guarda con extensión fla (*.fla), mientras que la película
se genera tras ejecutar el documento, por lo que automáticamente se guardará
con extensión swf (*.swf)


Programación Web

3. Formularios Web

3.1. Introducción

Objetivos

Al finalizar este tema tendrás la capacidad de crear aplicaciones ASP.Web usando
la tecnología .NET. Además, conocerás los principales elemento que se presenta n
a un usuario a través de su navegados, esto es, una página Web o Formulario
Web.

Actividad 1

Nombre de la Actividad: Acercando la tienda al cliente

Objetivo: Al finalizar esta actividad podrás comprender el impacto que puede
causar que un negocio esté en línea.

Escenario: Imaginemos a una empresa pequeña, Seven Cycles, dedicada a la
producción y venta de bicicletas, que busca una forma de venta altamente efectiva
para introducir sus productos al mercado, sin la necesidad de un intermediario que
aumente sus costos, y reduzca sus ganancias. Para tal propósito, se requiere la
integración de una base de información (hojas de datos, fotografías, etc.)

Instrucciones:
Ejecuta el video clip “SevenCycle”, incluido en la sección de materiales de apoyo
para esta sección, y analízalo con atención.
Imagina que eres el/la encargad@ de desarrollar aplicaciones Web en la
compañía Seven Cycles, y se te pide desarrollar el sitio de la empresa para la
venta de la nueva bicicleta.
Deberás entregar por escrito los requerimientos técnicos (herramientas a utilizar) y
de información, que requieras para desarrollar a la brevedad posible este sitio.
Coloca tu documento de especificación de requerimientos en la sección de tareas
correspondientes a esta sección.
El nombre de tu documento debe seguir el formato especificado en las reglas del
Juego.

La fecha límite de entrega es el día: ___________ a las __________ horas


Programación Web


Este tema se evaluará con el documento que entregarás, tu respuesta deben ser
detallada y justificada, se tomará en cuenta tu creatividad, originalidad y que cubra
con los elementos especificados. Este trabajo contará el ¿?% de la calificación
final, siempre y cuando lo entregues en la fecha y forma acordada.
Guía para el profesor

1. Verificar que se encuentra el video clip “SevenCycle” en la sección de
materiales del curso.
2. Revisar el documento que el alumno ha obtenido un panorama bien
definido de la importancia de una aplicación Web.

Actividad 2

Nombre de la Actividad: Conociendo ASP.NET

Objetivo: Al finalizar esta actividad serás capaz de identificar los principales
componentes del framework de .NET, explicarás el modelo de ejecución de
ASP.NET y el proceso de desarrollo de una aplicación Web ASP.NET

Instrucciones:

1. Estudia con atención la presentación Introducción ASP.NET que se
encuentra ubicada en los materiales de apoyo del curso.
2. Visita el FORO para la actividad 2 que se encuentra en la página principal
del curso (Moodle)!!!!!! Y agrega tu aportación a lo siguiente: ¿Por qué
crees que ASP.NET sea una buena opción para desarrollo de aplicaciones
Web? justifica tu respuesta


Este tema se evaluará con la aportación que realices a la pregunta incluida en el
foro, tus respuestas deben ser detalladas y justificadas, se tomará en cuenta tu
creatividad y originalidad. Este trabajo contará el ¿?% de la calificación final,
siempre y cuando lo entregues en la fecha y forma acordada.

Guía para el profesor

Verificar que la liga a la presentación se encuentra disponible y activo en la
sección de materiales de apoyo para este tema


Programación Web

Materiales de apoyo

Aquí encontrarás los materiales de apoyo para este capítulo

• Da click aquí para ver el video clip "Seven Cycles", indicado en la actividad
1 de esta sección.
• Da click aquí para iniciar la presentación de introducción a ASP.NET,
indicada en la actividad 2 de esta sección.

Introducción al Framework de Microsoft .NET y a ASP.NET

Agenda

• Pre-requisitos
• Fundamentos Arquitectura Web
• Introducción al Framework de .NET
• Bosquejo de ASP.NET
• Repaso de Visual Studio .NET
• Creando el proyecto de una aplicación Web ASP.NET

Pre-requisitos

Este modulo asume que:

• Entiendes los fundamentos de Programación C#
• Tiendes familiaridad con el ambiente de desarrollo integrado (IDE) Visual
Studio .NET

No es indispensable que cuentes con conocimientos previos en desarrollos Web
(HTML, JavaScript, DHTML, CGI, Active Server Pages); sin embargo te serían de
ayuda.

Fundamentos Arquitectura Web


Programación Web

Cliente PC/Mac/Unix/...
+ Navegador
Solicitud:
http://www.digimon.com/default.asp

HTTP, TCP/IP
Red

Respuesta:
<html>….</html>

Servidor Servidor Web

Fundamentos tecnologías de desarrollo Web

Tecnologías del lado del Cliente
• HTML, DHTML, JavaScript

Tecnologías del lado del Servidor
• ASP (Active Server Pages)

ASP.NET es la siguiente generación de ASP

Lección: Introducción al Framework de .NET

• Qué es el Framework de .NET?
• Qúe problemas soluciona .NET?
• Los componentes del Framework de .NET
• Beneficios al usar el Framework de .NET
• Visual Studio .NET: La herramienta para desarrollar .NET

¿Qué es el Framework de .NET?

Programación Web

Herramientas de
desarrollo Clientes

Aplicaciones
Web ASP.NET
Bases de
Datos

Servicios Web
Framework XML
.NET Experiencias del
usuario

¿Qué problemas soluciona .NET?

• Aún con Internet, la mayoría de las aplicaciones y dispositivos tienen
problemas al comunicarse unos con otros
• Los programadores terminan escribiendo infraestructura en lugar de
aplicaciones
• Los programadores tienen que limitar sus alcances o continuamente
aprender nuevos lenguajes

Los Componentes del Framework .NET


Programación Web

Visual C++ C# Perl Python …
Basic

XML We b S e rvic es User Int erf ace
ASP.NET

ADO.NET and XML

.NET F ram ework Class Lib rary
Co mmon La ng uag e Runti me (CLR)

Message COM+ IIS WMI
Queui ng (Transa cti ons, P arti ti ons,
Obj ect P ool i ng)

Win3 2

Beneficios al usar el Framework de .NET

• Estar basado en estándares y prácticas Web
• La funcionalidad de las clases de .NET está universalmente disponible
• El código está organizado dentro de namespaces (espacios con nombre)
jerárquicos y clases
• Independiente del lenguaje


Programación Web

Window M FC/ATL .NET
s Framework
API Visual Basic
ASP
1980’s 1990’s 2000’s
Visual Studio .NET: La herramienta de desarrollo .NET

Herramientas para Herramientas para
Formularios Web Formularios Windows

Multiples Visual Studio .NET Manejo de
Lenguajes Errores

Herramientas
para Web Acceso a
Services Datos

Diseño Desarrollo Pruebas Instalación


Programación Web

Lección: Repaso de Visual Studio .NET

• ¿Por qué Visual Studio .NET?
• Ambiente integrado de desarrollo (Integrated Development Environment -
IDE)
• Demostración: Usando el IDE de Visual Studio .NET

¿Por qué Visual Studio .NET?

Visual Studio .NET simplifica el desarrollo de soluciones Web poderosas y
confiables e incrementa la eficiencia del desarrollador proporcionándole un
ambiente de desarrollo familiar y compartido
Además, incluye las siguientes características:

• Un IDE para múltiples lenguajes y múltiples tipos de proyectos
• Múltiples lenguajes dentro de un solo proyecto
• Múltiples tipos de proyectos dentro de una sola solución
• Navegador integrado
• Soporte de depuración (debugging)
• Interface personalizable

Ambiente de desarrollo integrado (IDE)

El ambiente de desarrollo integrado (IDE) de Visual Studio .NET contiene
múltiples ventanas que proveen una variedad de herramientas y servicios

• Muchas de estas características están disponibles desde diversas
ventanas, menús y barras de herramientas del IDE.

El Editor/Navegador es la ventana de interface principal en Visual Studio .NET.

• En modo Editor, el editor/navegador despliega código para editar y provee
una interface gráfica “Lo que ves es lo q ue tienes” (What You See Is What
You Get (WYSIWYG)) para colocación de controles.
• Se puede crear un diseño visual de la aplicación simplemente arrastrando
y soltando controles de la barra de herramientas
• El diseño de la lógica de la aplicación se puede manejar modificando el
código default del control Web.


Programacion web se

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Programacion web se

Semelhante a Programacion web se (20)

Último

Último (20)

Programacion web se