SECRETARIA DE EDUCACIN PBLICA

DIRECCION GENERAL DE EDUCACION SUPERIOR TECNOLOGICA

ISTITUTO TECNOLOGICO DEL ISTMO

PROGRAMACIN WEB AVANZADA

INFORME FINAL

Presenta:
CONTRERAS GUERRA EFRAN ALBERTO

Asesor:
Lic. Gmez Valdivieso Mara Isabel

Juchitn de Zaragoza Oax. A 22 de Junio de 2015

NDICE
UNIDAD

4
5
6

TEMAS

SUBTEMAS

1.1 Evolucin de las aplicaciones web

1.2 Arquitectura de las aplicaciones web
1.3 Tecnologas para el desarrollo de aplicaciones web
1.4 Planificacin de aplicaciones web
Arquitectura
2.1
Introduccin.
2.2
Representacin de documentos.
2.3
Tipos de datos bsicos.
2.4 Estructura global de un documento.
Lenguaje de marcado 2.5
Elementos bsicos: texto, vnculos, listas, tablas,
objetos, imgenes y aplicaciones.
2.6
Estructura y disposicin.
2.7
Formularios.
3.1
Introduccin.
3.2
Sintaxis.
Lenguaje de
3.3
Selectores.
presentacin
3.4
Tipos de medios.
3.5
Modelo de caja.
3.6
Aplicacin en documento web.
Programacin del
4.1
Introduccin al lenguaje.
lado del cliente
4.2
Elementos de programacin.
4.3
Manipulacin de objetos
Programacin del
5.1
Introduccin al lenguaje.
lado del servidor
5.2
Elementos de programacin.
5.3
Aplicacin.
Servicios web
6.1
Conceptos generales.
6.2
Estndares.
6.3
Seguridad e interoperabilidad.

ARQUITECTURA
1.1 Evolucin de las aplicaciones web.
La programacin web es un trmino adecuado para describir el proceso general
que engloba el diseo y la creacin de un sitio web.
Hace algunos aos, los sitios web no eran mucho ms que folletos digitales.
Actualmente los sitios son ms grandes y complejos.
Con la introduccin de comercio electrnico y las pginas dinmicas, los sitios ya
han dejado atrs los folletos y han pasado a ser autnticas aplicaciones de
software.

La Web 1.0 (1991-2003) es la forma ms bsica que existe, con navegadores de

slo texto bastante rpidos ya que es de slo lectura. El usuario no puede
interactuar con el contenido de la pgina (nada de comentarios, respuestas, citas,
etc), estando totalmente limitado a lo que el Webmaster sube a sta.
Algunos elementos de diseo tpicos de un sitio Web 1.0 incluyen:
Pginas estticas en vez de dinmicas por el usuario que la visita2
El uso de framesets o Marcos.
Extensiones propias del HTML como <bilnk> y <marquee>, etiquetas
introducidas durante la guerra de navegadores web.

Libros de visitas online o guestbooks

botones GIF, casi siempre a una resolucin tpica de 88x31 pixels en
tamao promocionando navegadores web u otros productos.3
Formularios HTML enviados va email. Un usuario llenaba un formulario y
despus de hacer clic se enviaba a travs de un cliente de correo
electrnico, con el problema que en el cdigo se poda observar los detalles
del envo del correo electrnico.

No se podian adherir comentarios ni nada parecido

Todas sus pginas se creaban de forma fija y muy pocas veces se actualizaban.
No se trata de una nueva versin, sino de una nueva forma de ver las cosas.

La web 2.0
El trmino Web 2.0 comprende aquellos sitios web que facilitan el compartir
informacin, la interoperabilidad, el diseo centrado en el usuario1 y
lacolaboracin en la World Wide Web. Un sitio Web 2.0 permite a los usuarios
interactuar y colaborar entre s como creadores de contenido generado por
usuarios en una comunidad virtual, a diferencia de sitios web estticos donde los
usuarios se limitan a la observacin pasiva de los contenidos que se han creado
para ellos. Ejemplos de la Web 2.0 son las comunidades web, los servicios web,
las aplicaciones Web, los servicios de red social, losservicios de alojamiento de
videos, las wikis, blogs, mashups y folcsonomas.

Servicios asociados:

Blogs: Un blog es un espacio web personal en el que su autor puede

escribir cronolgicamente artculos, noticias...(con imgenes y enlaces).

Wikis: Una wiki es un espacio web corporativo, organizado mediante una

estructura hipertextual de pginas donde varias personas elaboran
contenidos de manera asncrona.
Redes sociales: Sitios web donde cada usuario tiene una pgina donde
publica contenidos y se comunica con otros usuarios. Ejemplos: Facebook,
Twitter, Tuenti, Hi5, Myspace, etc.
Entornos para compartir recursos: Entornos que nos permiten almacenar
recursos o contenidos en Internet, compartirlos y visualizarlos cuando nos
convenga. Existen de diversos tipos, segn el contenido que albergan o el
uso que se les da:
Documentos: Google Drive y Office Web Apps (SkyDrive), en los cuales
podemos subir nuestros documentos, compartirlos y modificarlos.
Videos: Youtube, Vimeo, Dailymotion, Dalealplay... Contienen miles de
vdeos subidos y compartidos por los usuarios.
Fotos: Picassa, Flickr... Permiten disfrutar y compartir las fotos tambin
tenemos la oportunidad de organizar las fotos con etiquetas, separndolas
por grupos como si fueran lbumes, podemos seleccionar y guardar aparte
las fotos que no queremos publicar.
Agregadores de noticias: Digg, Meneame... Noticias de cualquier medio son
agregadas y votadas por los usuarios.
Almacenamiento online: Dropbox, Google Drive, SkyDrive
Presentaciones: Prezzi, Slideshare.
Plataformas educativas
Aulas virtuales (sncronas)
Encuestas en lnea

Web 3.0
Web 3.0 es una expresin que se utiliza para describir la evolucin del uso y la
interaccin de las personas en internet a travs de diferentes formas entre los que
se incluyen la transformacin de la red en una base de datos, un movimiento
social hacia crear contenidos accesibles por mltiples aplicaciones non-browser, el

empuje de las tecnologas de inteligencia artificial, la web semntica, la Web

Geoespacial o la Web 3D.

Se basa en la idea de aadir metadatos semnticos y ontolgicos a la World Wide

Web. Esas informaciones adicionales que describen el contenido, el significado
y la relacin de los datos se deben proporcionar de manera formal, para que as
sea posible evaluarlas automticamente por mquinas de procesamiento. El
objetivo es mejorar Internet ampliando la interoperabilidad entre los sistemas
informticos usando "agentes inteligentes". Agentes inteligentes son programas en
las computadoras que buscan informacin sin operadores humanos. Con la web
3.0 se busca que los usuarios puedan conectarse desde cualquier lugar, cualquier
dispositivo y a cualquier momento.

Entre sus innovaciones destacan:

Bases de datos
Inteligencia artificial
Web semntica y SOA
1Evolucin al 3D

La web 4.0
Las aplicaciones ya no estarn en nuestras PCs, estarn en la internet y por ende
en todos lados. Pasaremos de una red tonta a una red inteligente donde el
objetivo primordial ser el de unir las inteligencias donde tanto las personas como
las cosas se comuniquen entre s para generar la toma de decisiones. Para el
2020 o quizs antes se espera que haya agentes en la Web que conozcan,
aprendan y razonen como lo hacemos las personas.La Web Ubicua es un
concepto que est an en desarrollo, pero me llama curiosamente la atencin

como se van complementando algunas tecnologas que nos permiten imaginar o

soar lo que podemos esperar en un futuro no muy lejano. Imagnese recibir
informacin en su celular en la calle por la que camina y que su propio equipo le
haga una reservacin en el restaurant de la esquina con solo saber sus gustos.
Arquitectura de las aplicaciones web
Una aplicacin Web es proporcionada por un servidor Web y utilizada por
usuarios que se conectan desde cualquier punto va clientes Web (browsers o
navegadores).La arquitectura de un Sitio Web tiene tres componentes principales:

Un servidor Web
Una conexin de red
Uno o ms clientes

El servidor Web distribuye pginas de informacin formateada a los clientes que

las solicitan. Los requerimientos son hechos a travs de una conexin de red, y
para ello se usa el protocolo HTTP. Una vez que se solicita esta peticin mediante
el protocolo HTTP y la recibe el servidor Web, ste localiza la pgina Web en su
sistema de archivos y la enva de vuelta al navegador que la solicit.

Las aplicaciones Web estn basadas en el modelo Cliente/Servidor que gestionan

servidores web, y que utilizan como interfaz pginas web.
Las pginas Web son el componente principal de una aplicacin o sitio Web. Los
browsers piden pginas (almacenadas o creadas dinmicamente) con
informacin a los servidores Web. En algunos ambientes de desarrollo de
aplicaciones Web, las pginas contienen cdigo HTML y scripts dinmicos,
que son ejecutados por el servidor antes de entregar la pgina.
Una vez que se entrega una pgina, la conexin entre el browser y el servidor
Web se rompe, es decir que la lgica del negocio en el servidor solamente se
activa por la ejecucin de los scripts de las pginas solicitadas por el browser (en
el servidor, no en el cliente). Cuando el browser ejecuta un script en el cliente, ste
no tiene acceso directo a los recursos del servidor. Hay otros componentes que
no son scripts, como los applets (una aplicacin especial que se ejecuta

dentro de un navegador) o los componentes ActiveX. Los scripts del cliente

son por lo general cdigo JavaScript o VBSscript, mezclados con cdigo HTML.
La coleccin de pginas son en una buena parte dinmicas (ASP, PHP, etc.), y
estn agrupadas lgicamente para dar un servicio al usuario. El acceso a las
pginas est agrupado tambin en el tiempo (sesin). Los componentes de una
aplicacin Web son:
1
Lgica de negocio.
Parte ms importante de la aplicacin.
Define los procesos que involucran a la aplicacin.
Conjunto de operaciones requeridas para proveer el servicio.
2
Administracin de los datos.
Manipulacin de BD y archivos.
3
Interfaz
Los usuarios acceden a travs de navegadores, mviles, PDAs, etc.
Funcionalidad accesible a travs del navegador.
Limitada y dirigida por la aplicacin.
Las aplicaciones web se modelan mediante lo que se conoce como modelo de
capas, Una capa representa un elemento que procesa o trata informacin. Los
tipos son:
Modelo de dos capas: La informacin atraviesa dos capas entre la interfaz
y la administracin de los datos.
Modelo de n-capas: La informacin atraviesa varias capas, el ms habitual es el
modelo de tres capas.
Modelo de dos Capas.
Gran parte de la aplicacin corre en el lado del cliente (fat client).
Las capas son:

Cliente (fat client): La lgica de negocio est inmersa dentro de la aplicacin

que realiza el interfaz de usuario, en el lado del cliente.
Servidor: Administra los datos.
Las limitaciones de este modelo son.
Es difcilmente escalable
Nmero de conexiones reducida
Alta carga de la red.
La flexibilidad es restringida
La funcionalidad es limitada.

Modelo de tres Capas.

Est diseada para superar las limitaciones de las arquitecturas ajustadas al
modelo de dos capas, introduce una capa intermedia (la capa de proceso) Entre
presentacin y los datos, los procesos pueden ser manejados de forma
separada a la interfaz de usuari o y a los datos, esta capa intermedia centraliza la
lgica de negocio, haciendo la administracin ms sencil a, los datos se pueden
integrar de mltiples fuentes, las aplicaciones web actuales se ajustan a este
modelo.

Las capas de este modelo son:

Capa de presentacin (parte en el cliente y parte en el servidor)
o Recoge la informacin del usuario y la enva al servidor (cliente)
o Manda informacin a la capa de proceso para su procesado
o Recibe los resultados de la capa de proceso
o Generan la presentacin
o Visualizan la presentacin al usuario (cliente)
Capa de proceso (servidor web)
o Recibe la entrada de datos de la capa de presentacin
o Interacta con la capa de datos para realizar operaciones
o Manda los resultados procesados a la capa de presentacin
Capa de datos (servidor de datos)
o Almacena los datos
o Recupera datos
o Mantiene los datos
o segura la integridad de los datos

1.2 Tecnologas para el desarrollo de aplicaciones web

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo,
como es lgico, y su eleccin no es tan trivial. Hay que tener en cuenta las
aplicaciones de las que dispone el Sistema Operativo y sus costes.
Por ejemplo, tenemos Microsoft Windows, cuyas aplicaciones son muy caras,
como Photoshop, Dreamweaver, Fireworks, ASP .NET Y por otro lado tenemos
GNU/Linux, con GIMP, Inkscape, Amaya, Aptana, PHP (aunque todos ellos
tambin estn disponibles en Windows).
Otra caracterstica a tener en cuenta es las facilidades que el Sistema Operativo
aporta al desarrollador, y en este sentido GNU/Linux se lleva de calle a Windows.
Y esto es porque Windows no fue diseado para los desarrolladores, sino para
personas que no tienen muchos conocimientos sobre informtica.
Y por el contrario GNU/Linux fue creado por desarrolladores, y para
desarrolladores; y por lo tanto en GNU/Linux podemos encontrar infinidad de
herramientas que nos harn la vida mucho ms fcil, que adems son libres.
Fases de desarrollo de una web

Para elegir las herramientas a utilizar, antes debemos identificar las fases del
proceso que forman el ciclo de vida de un desarrollo web.
Diseo:
El diseo consiste en crear esbozos de la web final mediante una herramienta
grfica, como Photoshop, GIMP o Inkscape.
Maquetacin HTML/CSS:
La maquetacin consiste en convertir los esbozos creados en la fase anterior en
plantillas HTML, su respectiva hoja de estilos, y las imgenes usadas. Es posible
saltarse la fase anterior para comenzar directamente con esta fase, dependiendo
de si dominamos herramientas como Photoshop o no.
Programacin cliente:
La programacin cliente consiste bsicamente en Javascript. Una web puede no
tener necesidad de hacer programacin cliente, como puede ser una pequea web
corporativa con poca informacin esttica, o puede que requiera enormes
esfuerzos en esta fase, como ocurre con los proyectos Web 2.0.
Programacin servidor:
En esta fase, que se desarrolla junto con la anterior, crearemos la aplicacin web
en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.
Depuracin:
Esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas
unitarias, aserciones, trazas, etc.
Pruebas en local:
En nuestro servidor local haremos todas las pruebas posibles.
Subir ficheros al hosting:
Una vez nuestra web est completada y bien testeada en nuestro servidor local
(desarrollo), la subiremos al servidor del hosting elegido (produccin).
Dependiendo del hosting, podremos usar FTP, SFTP (SSH), WebDAV, o
incluso Subversin.
Pruebas en hosting:
Realizaremos las ltimas pruebas en el servidor del hosting para comprobar que el
cambio de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor
local debe tener exactamente la misma configuracin que el servidor del hosting.
Herramientas: desarrollo en PHP
A continuacin se enumeran las herramientas bsicas para el desarrollo de una
web en PHP, en sus diferentes fases de diseo e implementacin.
Fases: diseo y maquetacin

Adobe PhotoShop


GIMP:

Inkscape

Adobe Fireworks

Dreamweaver, Aptana, Amaya:

Fase: maquetacin
Fases: maquetacin, programacin cliente
Fase: programacin servidor
Con l crearemos fcilmente la aplicacin web en PHP. Aunque podremos usar
igualmente cualquier editor. Una muy buena alternativa es Eclipse con el plugin
PHP.
Otra aplicacin muy til que est muy ligada a Zend Studio es Zend Platform, un
mdulo para Apache que permite depurar una web directamente en el navegador
(Internet Explorer o Firefox), adems de otras funciones ms complejas, como
alertas configurables para que nos enve un email por cada error ocurrido en la
web, o cuando un script sobrepase un tiempo determinado de ejecucin, por
ejemplo.
Fase: prueba local

Apache

Firefox / Firebug / Web Developer Extension

Fases: pruebas en local, depuracin
Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma pgina
para ver los cambios en tiempo real, consultar los tiempos de carga de la pgina
en conjunto, de las imgenes, javascripts, hojas de estilo, etc, as como sus
tamaos, etc. Y Web Developer nos ofrece herramientas muy tiles como ver las
cookies de la web, ocultar imgenes, cambiar el tamao del navegador a
resoluciones estndar, etc.
Subir ficheros al servidor del hosting
Una vez hayamos concluido todas las fases anteriores, y nuestro proyecto est
listo, deberemos subirlo al servidor del hosting.
La herramienta a utilizar depender de las opciones que nos ofrezca el hosting,
que desgraciadamente en la mayora de los casos es solamente el antiguo FTP
(FileZilla). En Dreamweaver y Zend Studio tenemos un cliente FTP y SFTP (SSH),
y la tarea consistir simplemente en configurar el FTP y copiar y pegar los
directorios que queramos subir.

1.3 Planificacin de aplicaciones web

A menudo antes de empezar un proyecto no tenemos claro cul es el objetivo del
mismo o qu pretendemos alcanzar por eso esta pequea lista te puede ayudar a
la hora de planificar un proyecto.
Planificar una aplicacin web implica pensar y definir muchas cuestiones de
importancia:

1. Planificar el futuro
Puede sonar un poco duro que nos tengamos planear el futuro de algo que an no
existe pero es as, que pasa si en un futuro tuviramos problemas de
escalabilidad, y s tuviramos que migrar las bases de datos de MySql a Oracle,
de una buena planificacin depende la dificultad en un futuro de realizar cambios
en la plataforma que sostiene nuestra aplicacin.
2. Documentacin
Documenta todo lo que puedas tu aplicacin en especial aquellas partes de la
misma que hayan requerido un mayor tiempo de desarrollo, en un futuro cercano
te librar de ms de un quebradero de cabeza.
3. No empieces por los pequeos detalles
A menudo es ms sencillo plantearse el desarrollo de pequeos servicios cmo
pueden ser los RSS o una galera de imgenes, pero es fundamental comenzar
por lo que vendr a ser la base de nuestra aplicacin, de este modo podremos ir
completando nuestra aplicacin en un orden lgico, primero los cimientos
4. Diseo de la interfaz
Esta entrada puede que te ayude en esta parte, es importante conseguir un buen
diseo para nuestra interfaz, es importante conseguir un interfaz que se atractivo y
til para la gran mayora de los usuarios, lo ms importante es llegar a conectar
con el usuario y la mejor manera es ofrecerle la mayor cantidad de informacin
posible para que se llegue a sentir parte del proyecto pero todo esto muchas
veces no lo llegamos a conseguir por una mala eleccin en la combinacin de los
colores que se integran en nuestra interfaz.
5. Evita construirte libreras o frameworks innecesarios
Muchas personas siempre sostienen que es mejor que cada desarrollador utilice
sus propias libreras, pero la realidad es que en muchas ocasiones esto supone
una gran prdida de tiempo, es mejor buscar una librera o framework que se
parezca lo ms posible a lo deseado que desarrollarlo por ti mismo.
6. Ten un plan de proyecto
Asegrate de que cada desarrollador que trabaje en el proyecto sepa qu es lo
que debe de hacer y cundo tiene que hacerlo, teniendo todo esto redactado en
un documento te ayudar a identificar problemas.
7. Elige el lenguaje adecuado

Ya sabes que hay numerosas discusiones sobre Cul es el mejor lenguaje de

programacin?, la respuesta a menudo es depende de para que quieras utilizarlo,
por eso asegrate de escoger el lenguaje adecuado.
8. Evita las distracciones
Optimiza tu tiempo, cuando ests trabajando que nada te distraiga, ni llamadas
telefnicas, ni clientes de mensajeras instantneas, proponte un buen nmero de
horas al da de trabajo aislado dedicado al proyecto.
9. Sigue un buen control de calidad
Muchas veces nos equivocamos al planificar los tiempos de proyecto y esto lleva a
menudo a los desarrolladores a tener que escribir cdigo sucio, esta es una
buena opcin si lo que quieres es una demo de la aplicacin funcionando pero ea
actitud te traer problemas en el futuro.
10. Plantate los pasos a seguir despus del desarrollo
Ten en cuenta que est fase de desarrollo algn da deber acabar, estudia con
qu frecuencia se deber actualizar y que se necesita para que este funcione.
Bibliografia:
http://mislibrosmiespacio.blogspot.mx/2015/04/61-conceptos-generales.html
http://mislibrosmiespacio.blogspot.mx/2015/04/62-estandares.html
http://mislibrosmiespacio.blogspot.mx/2015/04/63-seguridad-einteroperabilidad.html
https://programacion1class.wordpress.com/unidad-6-servicios-web/
http://itpn.mx/recursosisc/8semestre/programacionweb/Unidad%20III.pdf
http://itpn.mx/recursosisc/8semestre/programacionweb/Unidad%20IV.pdf
http://www.itpn.mx/recursosisc/8semestre/programacionweb/Unidad%20V.pdf
https://unidad1programacionweb.wordpress.com/