• Author / Uploaded
• Efrain Alberto Contreras Guerra

• Categories
• Servidor web
• Aplicación web
• Red mundial
• Tecnología
• Navegador web

Citation preview

SECRETARIA DE EDUCACIÓN PÚBLICA DIRECCION GENERAL DE EDUCACION SUPERIOR TECNOLOGICA ISTITUTO TECNOLOGICO DEL ISTMO

PROGRAMACIÓN WEB AVANZADA

INFORME FINAL

Presenta: CONTRERAS GUERRA EFRAÍN ALBERTO

Asesor: Lic. Gómez Valdivieso María Isabel

Juchitán de Zaragoza Oax. A 22 de Junio de 2015

ÍNDICE UNIDAD

1

2

3

4 5 6

TEMAS

SUBTEMAS

1.1 Evolución de las aplicaciones web 1.2 Arquitectura de las aplicaciones web 1.3 Tecnologías para el desarrollo de aplicaciones web 1.4 Planificación de aplicaciones web Arquitectura 2.1 Introducción. 2.2 Representación de documentos. 2.3 Tipos de datos básicos. 2.4 Estructura global de un documento. Lenguaje de marcado 2.5 Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones. 2.6 Estructura y disposición. 2.7 Formularios. 3.1 Introducción. 3.2 Sintaxis. Lenguaje de 3.3 Selectores. presentación 3.4 Tipos de medios. 3.5 Modelo de caja. 3.6 Aplicación en documento web. Programación del 4.1 Introducción al lenguaje. lado del cliente 4.2 Elementos de programación. 4.3 Manipulación de objetos Programación del 5.1 Introducción al lenguaje. lado del servidor 5.2 Elementos de programación. 5.3 Aplicación. Servicios web 6.1 Conceptos generales. 6.2 Estándares. 6.3 Seguridad e interoperabilidad.

ARQUITECTURA 1.1 Evolución de las aplicaciones web. La programación web es un término adecuado para describir el proceso general que engloba el diseño y la creación de un sitio web. Hace algunos años, los sitios web no eran mucho más que folletos digitales. Actualmente los sitios son más grandes y complejos. Con la introducción de comercio electrónico y las páginas dinámicas, los sitios ya han dejado atrás los folletos y han pasado a ser auténticas aplicaciones de software.

La Web 1.0 (1991-2003) es la forma más básica que existe, con navegadores de sólo texto bastante rápidos ya que es de sólo lectura. El usuario no puede interactuar con el contenido de la página (nada de comentarios, respuestas, citas, etc), estando totalmente limitado a lo que el Webmaster sube a ésta. Algunos elementos de diseño típicos de un sitio Web 1.0 incluyen:  Páginas estáticas en vez de dinámicas por el usuario que la visita2  El uso de framesets o Marcos.  Extensiones propias del HTML como y , etiquetas introducidas durante la guerra de navegadores web.

  

Libros de visitas online o guestbooks botones GIF, casi siempre a una resolución típica de 88x31 pixels en tamaño promocionando navegadores web u otros productos.3 Formularios HTML enviados vía email. Un usuario llenaba un formulario y después de hacer clic se enviaba a través de un cliente de correo electrónico, con el problema que en el código se podía observar los detalles del envío del correo electrónico.

No se podian adherir comentarios ni nada parecido Todas sus páginas se creaban de forma fija y muy pocas veces se actualizaban. No se trata de una nueva versión, sino de una nueva forma de ver las cosas.

La web 2.0 El término Web 2.0 comprende aquellos sitios web que facilitan el compartir información, la interoperabilidad, el diseño centrado en el usuario1 y lacolaboración 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 estáticos donde los usuarios se limitan a la observación 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 folcsonomías.

Servicios asociados: 

Blogs: Un blog es un espacio web personal en el que su autor puede escribir cronológicamente artículos, noticias...(con imágenes y enlaces).

  

  

     

Wikis: Una wiki es un espacio web corporativo, organizado mediante una estructura hipertextual de páginas donde varias personas elaboran contenidos de manera asíncrona. Redes sociales: Sitios web donde cada usuario tiene una página 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, según 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 vídeos subidos y compartidos por los usuarios. Fotos: Picassa, Flickr... Permiten disfrutar y compartir las fotos también tenemos la oportunidad de organizar las fotos con etiquetas, separándolas 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 (síncronas) Encuestas en línea

Web 3.0 Web 3.0 es una expresión que se utiliza para describir la evolución del uso y la interacción de las personas en internet a través de diferentes formas entre los que se incluyen la transformación de la red en una base de datos, un movimiento social hacia crear contenidos accesibles por múltiples aplicaciones non-browser, el

empuje de las tecnologías de inteligencia artificial, la web semántica, la Web Geoespacial o la Web 3D.

Se basa en la idea de añadir metadatos semánticos y ontológicos a la World Wide Web. Esas informaciones adicionales —que describen el contenido, el significado y la relación de los datos— se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad entre los sistemas informáticos usando "agentes inteligentes". Agentes inteligentes son programas en las computadoras que buscan información 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 semántica y SOA 1Evolución al 3D

La web 4.0 Las aplicaciones ya no estarán en nuestras PC’s, estarán 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 quizás 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á aún en desarrollo, pero me llama curiosamente la atención

como se van complementando algunas tecnologías que nos permiten imaginar o soñar lo que podemos esperar en un futuro no muy lejano. Imagínese recibir información en su celular en la calle por la que camina y que su propio equipo le haga una reservación en el restaurant de la esquina con solo saber sus gustos. Arquitectura de las aplicaciones web Una aplicación Web es proporcionada por un servidor Web y utilizada por usuarios que se conectan desde cualquier punto vía clientes Web (browsers o navegadores).La arquitectura de un Sitio Web tiene tres componentes principales:   

Un servidor Web Una conexión de red Uno o más clientes

El servidor Web distribuye páginas de información formateada a los clientes que las solicitan. Los requerimientos son hechos a través de una conexión de red, y para ello se usa el protocolo HTTP. Una vez que se solicita esta petición mediante el protocolo HTTP y la recibe el servidor Web, éste localiza la página Web en su sistema de archivos y la envía de vuelta al navegador que la solicitó.

Las aplicaciones Web están basadas en el modelo Cliente/Servidor que gestionan servidores web, y que utilizan como interfaz páginas web. Las páginas Web son el componente principal de una aplicación o sitio Web. Los browsers piden páginas (almacenadas o creadas dinámicamente) con información a los servidores Web. En algunos ambientes de desarrollo de aplicaciones Web, las páginas contienen código HTML y scripts dinámicos, que son ejecutados por el servidor antes de entregar la página. Una vez que se entrega una página, la conexión entre el browser y el servidor Web se rompe, es decir que la lógica del negocio en el servidor solamente se activa por la ejecución de los scripts de las páginas 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 aplicación especial que se ejecuta

dentro de un navegador) o los componentes ActiveX. Los scripts del cliente son por lo general código JavaScript o VBSscript, mezclados con código HTML. La colección de páginas son en una buena parte dinámicas (ASP, PHP, etc.), y están agrupadas lógicamente para dar un servicio al usuario. El acceso a las páginas está agrupado también en el tiempo (sesión). Los componentes de una aplicación Web son: 1 Lógica de negocio. Parte más importante de la aplicación. Define los procesos que involucran a la aplicación. Conjunto de operaciones requeridas para proveer el servicio. 2 Administración de los datos. Manipulación de BD y archivos. 3 Interfaz Los usuarios acceden a través de navegadores, móviles, PDAs, etc. Funcionalidad accesible a través del navegador. Limitada y dirigida por la aplicación. Las aplicaciones web se modelan mediante lo que se conoce como modelo de capas, Una capa representa un elemento que procesa o trata información. Los tipos son: Modelo de dos capas: La información atraviesa dos capas entre la interfaz y la administración de los datos. Modelo de n-capas: La información atraviesa varias capas, el más habitual es el modelo de tres capas. Modelo de dos Capas. Gran parte de la aplicación corre en el lado del cliente (fat client). Las capas son:        

Cliente (fat client): La lógica de negocio está inmersa dentro de la aplicación que realiza el interfaz de usuario, en el lado del cliente. Servidor: Administra los datos. Las limitaciones de este modelo son. Es difícilmente escalable Número de conexiones reducida Alta carga de la red. La flexibilidad es restringida La funcionalidad es limitada.

Modelo de tres Capas. Está diseñada para superar las limitaciones de las arquitecturas ajustadas al modelo de dos capas, introduce una capa intermedia (la capa de proceso) Entre presentación 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 lógica de negocio, haciendo la administración más sencil a, los datos se pueden integrar de múltiples fuentes, las aplicaciones web actuales se ajustan a este modelo.

Las capas de este modelo son: Capa de presentación (parte en el cliente y parte en el servidor) o Recoge la información del usuario y la envía al servidor (cliente) o Manda información a la capa de proceso para su procesado o Recibe los resultados de la capa de proceso o Generan la presentación o Visualizan la presentación al usuario (cliente) Capa de proceso (servidor web) o Recibe la entrada de datos de la capa de presentación o Interactúa con la capa de datos para realizar operaciones o Manda los resultados procesados a la capa de presentación 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 Tecnologías para el desarrollo de aplicaciones web Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es lógico, y su elección 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 también están disponibles en Windows). Otra característica 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 diseñado para los desarrolladores, sino para personas que no tienen muchos conocimientos sobre informática. 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 harán la vida mucho más fácil, que además 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. Diseño: El diseño consiste en crear esbozos de la web final mediante una herramienta gráfica, como Photoshop, GIMP o Inkscape. Maquetación HTML/CSS: La maquetación consiste en convertir los esbozos creados en la fase anterior en plantillas HTML, su respectiva hoja de estilos, y las imágenes usadas. Es posible saltarse la fase anterior para comenzar directamente con esta fase, dependiendo de si dominamos herramientas como Photoshop o no. Programación cliente: La programación cliente consiste básicamente en Javascript. Una web puede no tener necesidad de hacer programación cliente, como puede ser una pequeña web corporativa con poca información estática, o puede que requiera enormes esfuerzos en esta fase, como ocurre con los proyectos Web 2.0. Programación servidor: En esta fase, que se desarrolla junto con la anterior, crearemos la aplicación web en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc. Depuración: 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 (producción). Dependiendo del hosting, podremos usar FTP, SFTP (SSH), WebDAV, o incluso Subversión. 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 configuración que el servidor del hosting. Herramientas: desarrollo en PHP A continuación se enumeran las herramientas básicas para el desarrollo de una web en PHP, en sus diferentes fases de diseño e implementación. Fases: diseño y maquetación · Adobe PhotoShop

· GIMP: · Inkscape · Adobe Fireworks · Dreamweaver, Aptana, Amaya: · Fase: maquetación Fases: maquetación, programación cliente Fase: programación servidor Con él crearemos fácilmente la aplicación web en PHP. Aunque podremos usar igualmente cualquier editor. Una muy buena alternativa es Eclipse con el plugin PHP. Otra aplicación muy útil que está muy ligada a Zend Studio es Zend Platform, un módulo para Apache que permite depurar una web directamente en el navegador (Internet Explorer o Firefox), además de otras funciones más complejas, como alertas configurables para que nos envíe un email por cada error ocurrido en la web, o cuando un script sobrepase un tiempo determinado de ejecución, por ejemplo. Fase: prueba local · Apache · Firefox / Firebug / Web Developer Extension Fases: pruebas en local, depuración Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma página para ver los cambios en tiempo real, consultar los tiempos de carga de la página en conjunto, de las imágenes, javascripts, hojas de estilo, etc, así como sus tamaños, etc. Y Web Developer nos ofrece herramientas muy útiles como ver las cookies de la web, ocultar imágenes, cambiar el tamaño del navegador a resoluciones estándar, 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 mayoría 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 Planificación de aplicaciones web A menudo antes de empezar un proyecto no tenemos claro cuál es el objetivo del mismo o qué pretendemos alcanzar por eso esta pequeña lista te puede ayudar a la hora de planificar un proyecto. Planificar una aplicación 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 aún no existe pero es así, que pasa si en un futuro tuviéramos problemas de escalabilidad, y sí tuviéramos que migrar las bases de datos de MySql a Oracle, de una buena planificación depende la dificultad en un futuro de realizar cambios en la plataforma que sostiene nuestra aplicación. 2. Documentación Documenta todo lo que puedas tu aplicación en especial aquellas partes de la misma que hayan requerido un mayor tiempo de desarrollo, en un futuro cercano te librará de más de un quebradero de cabeza. 3. No empieces por los pequeños detalles A menudo es más sencillo plantearse el desarrollo de pequeños servicios cómo pueden ser los RSS o una galería de imágenes, pero es fundamental comenzar por lo que vendrá a ser la base de nuestra aplicación, de este modo podremos ir completando nuestra aplicación en un orden lógico, primero los cimientos… 4. Diseño de la interfaz Esta entrada puede que te ayude en esta parte, es importante conseguir un buen diseño para nuestra interfaz, es importante conseguir un interfaz que se atractivo y útil para la gran mayoría de los usuarios, lo más importante es llegar a conectar con el usuario y la mejor manera es ofrecerle la mayor cantidad de información posible para que se llegue a sentir parte del proyecto pero todo esto muchas veces no lo llegamos a conseguir por una mala elección en la combinación de los colores que se integran en nuestra interfaz. 5. Evita construirte librerías o frameworks innecesarios Muchas personas siempre sostienen que es mejor que cada desarrollador utilice sus propias librerías, pero la realidad es que en muchas ocasiones esto supone una gran pérdida de tiempo, es mejor buscar una librería o framework que se parezca lo más posible a lo deseado que desarrollarlo por ti mismo. 6. Ten un plan de proyecto Asegúrate de que cada desarrollador que trabaje en el proyecto sepa qué es lo que debe de hacer y cuándo 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 ¿Cuál es el mejor lenguaje de programación?, la respuesta a menudo es depende de para que quieras utilizarlo, por eso asegúrate de escoger el lenguaje adecuado. 8. Evita las distracciones Optimiza tu tiempo, cuando estés trabajando que nada te distraiga, ni llamadas telefónicas, ni clientes de mensajerías instantáneas, proponte un buen número de horas al día 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 “código sucio”, esta es una buena opción si lo que quieres es una demo de la aplicación funcionando pero ea actitud te traerá problemas en el futuro. 10. Plantéate los pasos a seguir después del desarrollo Ten en cuenta que está fase de desarrollo algún día 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/