C1 arquitectura.

PROGRAMACION WEB

1. Introducción a las tecnologías Web.

PROGRAMACION WEB

1Analizar, diseñar y planificar aplicaciones web.

1.1 Evolución de las aplicaciones web.1.2 Arquitectura de las aplicaciones web.1.3 Tecnologías para el desarrollo deaplicaciones web.1.4 Planificación de aplicaciones web.

Arquitectura.

Indicadores

1. Evolución de las aplicaciones web.• Reporte de representación en forma gráfica la evolución y

arquitectura de las aplicaciones web.• Exposición en equipo las diferentes tipos de sitios web.• Reporte “video” de Instalación de un servidor web (Wampserver). 2. Planificación de aplicaciones web.• Reporte Investigación previa desarrollo de proyecto.• Reporte de modelado y planificación de la construcción de un sitio

web.• Diagrama de navegación de un sitio web.3. Portafolio digital de evidencias.• Evidencias: Evolución de las aplicaciones web.• Evidencias: Planificación de aplicaciones web.• Evidencias: Proyecto integrador

1.1 Evolución de las aplicaciones web.

Los inicio de Internet nos remontan a los años 60. En plena guerra fría, Estados Unidos crea una red exclusivamente militar, con el objetivo de que, en el hipotético caso de un ataque ruso, se pudiera tener acceso a la información militar desde cualquier punto del país. Este red se creó en 1969 y se llamó ARPANET. En principio, la red contaba con 4 ordenadores distribuidos entre distintas universidades del país. Dos años después, ya contaba con unos 40 ordenadores conectados. Tanto fue el crecimiento de la red que su sistema de comunicación se quedó obsoleto. Entonces dos investigadores crearon el Protocolo TCP/IP, que se convirtió en el estándar de comunicaciones dentro de las redes informáticas (actualmente seguimos utilizando dicho protocolo).

Internet - Historia

ARPANET siguió creciendo y abriéndose al mundo, y cualquier persona con fines académicos o de investigación podía tener acceso a la red. Las funciones militares se desligaron de ARPANET y fueron a parar a MILNET, una nueva red creada por los Estados Unidos. La NSF (NationalScienceFundation)crea su propia red informática llamada NSFNET, que más tarde absorbe a ARPANET, creando así una gran red con propósitos científicos y académicos.

El desarrollo de las redes fue abismal, y se crean nuevas redes de libre acceso que más tarde se unen a NSFNET, formando el embrión de lo que hoy conocemos como INTERNET.

Internet - Historia

En 1985 la Internet ya era una tecnología establecida, aunque conocida por unos pocos

En el Centro Europeo de Investigaciones Nucleares(CERN), Tim BernersLee dirigía la búsqueda de un sistema de almacenamiento y recuperación de datos. BernersLee retomó la idea de Ted Nelson (un proyecto llamado "Xanadú" )de usar hipervínculos. Robert Caillauquien cooperó con el proyecto, cuanta que en 1990 deciden ponerle un nombre al sistema y lo llamarón WorldWideWeb (WWW)o telaraña mundial.

La nueva formula permitía vincular información en forma lógica y atravésde las redes. El contenido se programaba en un lenguaje de hipertexto con "etíquetas" que asignaban una función a cada parte del contenido. Luego, un programa de computación, un intérprete, eran capaz de leer esas etiquetas para despeglarla información. Ese interprete sería conocido como "navegador" o "browser".

Internet - Historia

En 1993 Marc Andreesenprodujo la primera versión del navegador "Mosaic", que permitió acceder con mayor naturalidad a la WWW.La interfaz gráfica iba más allá de lo previsto y la facilidad con la que podía manejarse el programa abría la red a los legos. Poco después Andreesenencabezó la creación del programa Netscape.

A partir de entonces Internet comenzó a crecer más rápido que otro medio de comunicación, convirtiéndose en lo que hoy todos conocemos.

Internet

Internet es definido como una red global de computadoras, cuya finalidad es permitir el intercambio libre de información entre todos los usuarios conectados mediante el TCP/IP al WWW.

Conceptos básicos

Internet. Protocolos del Internet

TCP/IP. Servicios de Internet. Sitios Web. Hospedaje web Navegadores Buscadores ¿Cuáles son los principales

beneficios de tener un Sitio Web?

En cualquier tipo de comunicación, ya sea entre personas o entre máquinas, siempre hace falta una serie de normas que regulen ese proceso, en el caso de las máquinas, las normas las establecen los organismos internacionales de normalización, y son aplicados por las computadoras de acuerdo con el protocolo que tenga instalado; por lo que se entiende como protocolo a un conjunto de reglas que emplean dos equipos de informáticos para dialogar entre si, de tal forma que puedan establecer una comunicación libre de errores

Protocolos del Internet.

Protocolo de Internet, Internet Protocol (IP).IP es el protocolo que determina los procedimientos de direccionamiento y encaminamiento, encargándose de depositar los datos en las direcciones correspondientes de la manera más eficiente posible es un protocolo no fiable y no orientado a conexión.


Protocolo de Control de Transporte, Transmission Control Protocol (TCP)Es el protocolo principal del conjunto. “TCP es un protocolo orientado a conexión que utiliza los servicios del nivel de Internet. Al igual que en todo protocolo orientado a conexión consta de las tres fases”.

Establecimiento de la conexión: Transferencia de los datos: Liberación de la conexión:


Transferencia de archivos, File Transfer Protocol (FTP).FTP es uno de los diversos protocolos del Internet, y es ideal para transferir datos en la red, dentro de los usos del Internet es el poder tener acceso a los archivos que residen en las computadoras remotas y transferirlos directo a la propia; estos archivos van desde documentos de texto, imágenes, archivos de sonido o programas.


Protocolo de Datagrama de Usuario, User Datagram Protocol (UDP).El UDP es un protocolo que se basa en el intercambio de datagramas, permitiendo su envío a través de la red sin que se haya establecido previamente una conexión, ya que el propio datagrama incorpora suficiente información de direccionamiento en su cabecera


Protocolo Simple de Transferencia de Correo Electrónico, Simple Mail Transfer Protocol (SMTP)


Parte de la familia del TCP/IP, el SMTP define el formato exacto que deben de tener los mensajes de correo electrónico y el cómo estos mensajes han de ser tratados en la red

Telnet (conexiones remotas). Telnet hace uso de la terminal virtual de red (NVT), como apoyo para modelar la comunicación entre dos entidades.

Protocolo de trasferencia de Noticias, Network News Trasfer Protocol (NNTP).

Se utiliza para el intercambio de mensajes de grupos de noticias entre los servidores de News


Protocolo de Transferencia de Archivos Trivial, Trivial File Transfer Protocol (TFTP).El TFTP es utilizado para la transferencia de pequeños archivos entre computadoras de la red “se utiliza en casos donde no se necesita la extensa funcionalidad y complejidad del FTP


Protocolo de trasferencia de hipertexto, Hipertext transfer protocol (HTTP).Es uno de los protocolos mas recientes. Es utilizado para el manejo de consultas de hipertexto y acceso de datos en el WWW. considerado como un protocolo de Solicitud-respuesta.


Servicios de Internet.

Internet basa su utilidad en los servicios de: WWWE-MailServicio de noticias acceso remoto Transferencia de archivos

Sitios Web

Una Página de Internet o Página Web es un documento que contiene información específica de un tema en particular y que es almacenado en algún sistema de cómputo que se encuentre conectado a la red mundial de información denominada Internet, de tal forma que este documento pueda ser consultado por cualesquier persona que se conecte a esta red mundial de comunicaciones. Un Sitio Web es un conjunto de páginas Web relacionadas entre sí.

Hospedaje web

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.

Navegadores

Un navegador web o explorador web (del inglés, navigator o browser) es una aplicación software libre que permite al usuario recuperar y visualizar documentos de hipertexto, comúnmente descritos en HTML, desde servidores web de todo el mundo a través de Internet.

Los navegadores actuales permiten mostrar o ejecutar: gráficos, secuencias de vídeo, sonido, animaciones y programas diversos además del texto y los hipervínculos o enlaces.

Buscadores

Un buscador es un tipo de software que crea índices de bases de datos o de sitios web en función de los títulos de los ficheros, de palabras clave, o del texto completo de dichos ficheros. El usuario conecta con un buscador y especifica la palabra o las palabras clave del tema que desea buscar. El buscador devuelve una lista de resultados presentados en hipertexto, es decir que se pueden pulsar y acceder directamente al fichero correspondiente.

¿Cuáles son los principales beneficios de tener un Sitio Web?

Facilitar la comunicación entre gobierno, instituciones educativas, empresas, asociaciones y personas físicas, con el propósito de establecer una relación aún más estrecha entre ellos. Particularmente en el aspecto comercial, fomentar una mayor comunicación entre clientes y empresas estableciendo un modelo de operación del negocio más orientado al cliente.

1.2 Arquitectura de las aplicaciones web.

Funcionamiento

1.2 Arquitectura de las aplicaciones web.

1.2 Protocolo http (protocolo de transferência de hipertexto).

Es uno de los protocolos mas recientes. Es utilizado para el manejo de consultas de hipertexto y acceso de datos en el WWW. Implementado por primera vez en el año de 1990, considerado como un protocolo de Solicitud-respuesta. Estos mensajes de solicitud son hechos a través de un agente usuario (un browser, navegador) o cualquier otra herramienta del usuario final. “El comienzo de todas las direcciones Web (http://)” indica al explorador que es la dirección de un documento compatible con HTTP”.

1.2 Protocolo http (protocolo de transferência de hipertexto).

El HTTP es un método de diálogo estandarizado entre dos máquinas distintas (Cliente y servidor). Su funcionamiento es muy sencillo, el cliente establece la conexión con el servidor, envía una petición y espera la respuesta. Cuando el servidor recibe la petición genera la respuesta, la envía al cliente y cierra la conexión. “Tanto el mensaje solicitado, como el de respuesta siguen el formato genérico RFC 822”.

Etapas de una transacción HTTP

Para profundizar más en el funcionamiento de HTTP, veremos primero un caso particular de una transacción HTTP; en los siguientes apartados se analizarán las diferentes partes de este proceso.

Cada vez que un cliente realiza una petición a un servidor, se ejecutan los siguientes pasos:

Un usuario accede a una URL, seleccionando un enlace de un documento HTML o introduciéndola directamente en el campo Locationdel cliente Web.

El cliente Web descodifica la URL, separando sus diferentes partes. Así identifica el protocolo de acceso, la dirección DNS o IP del servidor, el posible puerto opcional (el valor por defecto es 80) y el objeto requerido del servidor.

Se abre una conexión TCP/IP con el servidor, llamando al puerto TCP correspondiente

Etapas de una transacción HTTP

Se realiza la petición. Para ello, se envía el comando necesario (GET, POST, HEAD,…), la dirección del objeto requerido (el contenido de la URL que sigue a la dirección del servidor), la versión del protocolo HTTP empleada (casi siempre HTTP/1.0) y un conjunto variable de información, que incluye datos sobre las capacidades del browser, datos opcionales para el servidor,…

El servidor devuelve la respuesta al cliente. Consiste en un código de estado y el tipo de dato MIME de la información de retorno, seguido de la propia información.

Se cierra la conexión TCP.

conceptos

URL: es el acrónimo de (UniformResourceLocator), localizador uniforme de recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la WWW.

Las URL se utilizarán para definir el documento de destino de los hiperenlaces, para referenciar los gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. Cada elemento de internet tendrá una URL que lo defina, ya se encuentre en un servidor de la WWW, FTP, gopher o las News.

GET: se utiliza para recuperar el contenido de un recursos estático (página HTML, imágen, vídeo, etc), o bien ejecutar un programa o script en el servidor (como programas CGI, páginas ASP, JSP, PHP, etc.). Es la operación más común, que se lanza cada vez que pulsamos en un enlace y navegamos a una página web. etc.

conceptos

Los tipos MIME (MultipurposeInternet Mail Extensions): son un estándar para el envío de información binaria a través de caracteres alfanuméricos. Este estándar permite que, a través del protocolo HTTP (que maneja información en modo texto), podamos transferir archivos no-textuales, como pueden ser imágenes, audio, vídeo, programas ejecutables etc.

HEAD: es una operación especial que tan sólo nos recupera información del recurso, como el tamaño, la fecha de modificación, tipo, etc. Lo suelen utilizar los navegadores o servidores proxy para comprobar el estado de su caché u otras operaciones.

POST: envía información desde el cliente al servidor web, como pueden ser los datos de un formulario.

Tarea 2

10.Sitio de descargas11.Sitio de juegos12.Sitio de información13.Sitio buscador14. Sitio shock15. Sitio de subastas16. Sitio personal17. Sitios de videos18. Sitios de fotos19 Sitio portal20. Sitio Web 2.021. Creador de sitios22. Wiki23. Sitio político24. Sitio de portafolio25. Sitide rating26. Sitios educativos27. Sitio de noticias

1.Sitio de archivo2.Sitio weblog(o blog) 3.Sitio de foro4.Sitio de empresa5.Sitio de comercio electrónico6.Sitio de comunidad virtual7.Sitio de Base de datos8.Sitio de desarrollo9.Sitio directorio

Exposición PowerPoint.

15 %

Entrega próximo jueves 25

1.2.2 URL’s

Las siglas URLcorresponden a las palabras inglesas Universal ResourceLocator, que en español viene a significar algo así como "Localizador Universal de Recursos". La URL es el modo que tiene la Web de identificar cualquier tipo de archivo o recurso en cualquier parte del mundo.

El formato de una URL básica (concretamente, de la URL de estamisma página) es el siguiente:

http://www.psicobyte.com/html/taller/url.html Que, dividido en sus partes elementales, es más o menos

esto:

http://www.psicobyte.com/html/taller/url.html

1.2.2 URL’s

CLASES y TIPOS DE DOMINIOSDominios genéricos Pueden ser registrados por todo tipo de

personas físicas y jurídicas de cualquier parte del mundo sin requerimientos especiales. Este tipo de dominios son económicos y de registro muy rápido.

1.2.2 URL’s

-Dominios .com: Son los más acertados para empresas u organizaciones con ánimo de lucro. La red está llena de .com, por lo que registrando un dominioeste tipo, su organización adquirirá un aspecto de globalidad.-Dominios .eu: Dominios relativos a Europa. Son asignados por EURID.-Dominios .org: Para todo tipo de organizaciones sin ánimo de lucro.-Dominios .net: Usados mayoritariamente por empresas de Internet y Telecomunicaciones.-Dominios .edu: Usados para fines educativos-Dominios .mil: Exclusivamente para todo tipo de organizaciones militares.-Dominios .gov: Para los gobiernos

1.2.2 URL’s

Otros dominiosEn esta categoría incluimos los nuevos dominios que se han incorporado recientemente a Internet. También pueden ser registrados por todo tipo de personas físicas y jurídicas de cualquier parte del mundo sin requerimientos especiales:Dominios genéricos Multilingües: Son dominios .com, .orgy .netque llevan eñes, acentos, u otros caracteres especiales.-Dominios .tv: Usados en empresas de vídeo, cine y televisión principalmente.-Dominios .info: Destinados principalmente para empresas de información, periódicos, revistas, etc.-Dominios .biz: Proviene de la pronunciación del inglés "business", por lo que están dedicados a actividades comerciales y de negocios. Es lo mismo que el .com, pero para la zona de Europa.-Dominios .cc: Esta extensión tiene un especial interés para aquellos que pretenden conseguir un dominio global y no tienen posibilidad de conseguir el .comque desean.

1.2.2 URL’s

Otros dominiosDominios .ws: Las siglas .wsse identifican con Web Site, por lo que se trata de una magnífica opción para todo tipo de sitios web. Además, debido a sunovedad, es mucho más probable conseguir el dominio deseado.-Dominios .name: Proviene del inglés “name” que significa “nombre”, por lo que se trata de una opción totalmente nueva para registrar nuestro nombre propio o apodo.-Dominios .pro: Para uso especifico reservado a profesionales de determinadas categorías, agrupados en subdominios. Ejemplo: .med.pro(médicos).Deberán acreditar su pertenencia al colegio u organización profesional correspondiente.-Dominios .aero: De uso restringido para la industria de los servicios aéreos: compañías aéreas, aeronáuticas, aeropuertos y servicios aéreos.-Dominios .coop: Reservado a las cooperativas y hace falta demostrar la cualidad de cooperativa a través de las organizaciones locales correspondientes.-Dominios .museum: Dominio de uso restringido para los museos. Permite en un segundo nivel el nombre del museo que se trate. (prado.museum,picasso.museum)

1.3 Tecnologías para el desarrollo deaplicaciones web.

Arquitectura de las aplicaciones Web. Lenguajes de programación del lado del

cliente. Lenguajes de programación del lado del

servidor. Ambientes para el desarrollo de

aplicaciones Web Metodologías para el desarrollo de

aplicaciones Web Aspectos de seguridad.


Las aplicaciones web se han convertido en pocos años en complejos sistemas con interfaces de usuario cada vez más parecidas a las aplicaciones de escritorio, dando servicio a procesos de negocio de considerable envergadura y estableciéndose sobre ellas requisitos estrictos de accesibilidad y respuesta.

Arquitectura de las aplicaciones Web

La WWW está basado en el modelo Cliente / Servidor.El Cliente principal en el WWW son los browsers o navegadores que solicitan información al Servidor.El Servidor son los Servidores Web que proporcionan documentos y contenidos multimedia a los clientes a través de la red.Los “clientes” realizan peticiones de información a los “servidores”.Las peticiones de información en el Web se realizan a través de la red (Internet / Intranet).Las peticiones vía Web utilizan el protocolo HTTP para realizar las transacciones dentro del modelo Cliente / Servidor.

Arquitectura de las aplicaciones Web

Arquitectura de las aplicaciones Web.

Una Arquitectura define: un conjunto de elementos, conectores, restricciones y un sistema de control que caracterizan a un sistema o a una familia de sistemas. La WWW está basado en el modelo Cliente / Servidor.


SERVIDOR WEB Un servidor web es un programa que ejecuta de forma continua en un ordenador, manteniéndose a la espera de peticiones por parte de un cliente (un navegador de internet) y que contesta a estas peticiones de forma adecuada, sirviendo una página web que será mostrada en el navegador o mostrando el mensaje correspondiente si se detectó algún error.

APLICACIÓN WEB Es aquella que los usuarios usan accediendo a un servidor web a través de Internet o de una intranet mediante un navegador web que opera como cliente ligero. Se caracteriza por la posibilidad de actualizar y mantener aplicaciones web sin distribuir e instalar software en miles de potenciales clientes.


NAVEGADOR WEB Un navegador web es una aplicación software que permite al usuario recuperar y visualizar documentos de hipertexto, comúnmente descritos en HTML, desde servidores web de todo el mundo a través de internet

PLUG -IN Son programas que permiten visualizar e interpretar ficheros de texto, de vídeo o de sonido, de distinto formato. La característica principal de estos programas es que, una vez instalados, son transparentes para el usuario que los utiliza y están totalmente integrados en los sitios Web.


Tarea:Investigar 3 navegadores web con sus característicasInvestigar 3 tipos de plug-in su aplicación y característicasInvestigaciónReporte escrito: entrega lunes 30 de agosto5

Lenguajes de programación del lado del cliente.

El navegador es una especie de aplicación capaz de interpretar las órdenes recibidas en forma de código HTML fundamentalmente y convertirlas en las páginas que son el resultado de dicha orden.

Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (un ordenador que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente).

Lenguajes de programación del lado del SERVIDOR.

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él. Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra el HTML sino también el Java y el JavaScriptlos cuales son simplemente incluidos en el código HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan un pretratamiento.


Es un programa compuesto por un conjunto de herramientas para un programador. Puede dedicarse en exclusiva a un sólo lenguaje de programación o bien, poder utilizarse para varios. Consiste en un editor de código, un compilador, un depurador y un constructor de interfaz gráfica Su meta es proveer un marco de trabajo amigable para los programadores de algún lenguaje de programación.


El desarrollo en ambiente Web se hace sobre un lenguaje script llamado HTML. Sobre ese lenguaje script (un lenguaje script es un lenguaje no compilado) se apoyan todos los otros lenguajes tratados en Web. Cuando uno programa en ASP, ASP.NET o mismo JAVA esos scripts se apoyan sobre el HTML para ser interpretada por un Browser.Una característica de la programación en Web, es que se necesita usar un Browser de Internet como programa cliente, es decir, el browser actuara como el "traductor" del código escrito por el programador y desplegara todo el contenido en el código a la pantalla del usuario. El browser, por su vez, para interpretar algunos scripts, necesita los llamados Pluggins. Que no son nada mas que "módulos" que le ayudaran al programa browser interpretar los comandos contenidos en el código.


Se necesita para desarrollar y para poner a funcionar un programa en Web, lo que se llama Web Server, que por su vez contendrá los códigos de los scripts que los browsers de los clientes interpretaran. Un Web Server es un servidor ordinario con algunos servicios especiales activos para servir a los browsers clientes.Podemos apreciar la estructura básica de un programa montado en un Web Server con la figura abajo:

Ambientes para el desarrollo de aplicaciones Web.

WampserverPrograma para Windows que instala en un solo paso todo lo necesario para ejecutar aplicaciones web creadas en PHP sobre un servidor Apache y con base de datos MySQL. El programa permite ahorrarse los pasos de configuración de PHP a menudo complejos y ofrece un panel de control desde donde se pueden realizar muchas tareas de administración y mantenimiento del servidor web.


Adobe CreativeSuiteAdobe CreativeSuite (CS) es una colección de diseño gráfico, edición de vídeo, y aplicaciones de desarrollo Web realizado por Adobe Systems. La colección se compone de aplicaciones de Adobe (por ejemplo, Photoshop, Acrobat, InDesign), que se basan en diferentes tecnologías (por ejemplo, PostScript, PDF, Flash). La última versión, Adobe CreativeSuite 5 (CS5), fue lanzado el 30 de abril de 2010. [1]


Arquitectura de dos niveles:Es la más simple, se tiene el nivel del “Cliente” y el nivel del “Servidor”.


El primer nivel consiste en la capa de presentación que incluye no sólo el navegador, sino también el servidor web que es el responsable de dar a los datos un formato adecuado. El segundo nivel está referido habitualmente a algún tipo de programa o script. Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su ejecución.

Servidor Web

Un servidor web es un programaque implementa el protocoloHTTP). Este protocolo pertenece a la capa de aplicación del modelo OSI y está diseñado para transferir lo que se llama hipertextos, páginas web o páginas HTML: textos complejos con enlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductores de música.

Servidor Web.

Algunos ejemplos: CERN httpd Apache(Libre, servidor más usado del

mundo, según Wikipedia) IIS Resin Tomcat(Libre, del proyecto Jakartade

Apache) Geronimo(Libre, orientado a J2EE, del

proyecto Jakartade Apache, actualmente se encuentra en desarrollo)

Jboss JOnAS Cherokee


Los IDE (ambientes integrados de desarrollo) para aplicaciones Web son muy numerosos.

Considerar los que permitan trabajar con los diferentes lenguajes para Web.

Algunos son específicos para lenguajes del lado del servidor. Por ejemplo, Visual Studio solo soporta ASP.NET del lado del servidor.

Existen IDE’sde buena cantidad, libres y gratuitos de buena calidad.


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

2.5 Metodologías para el desarrollo de aplicaciones Web.

Ciclo de vida clásico. Pressman, “adapta” esta metodología para el desarrollo de Web, en lo que el llama la “Ingeniería Web”:

Formulación. Planificación. Análisis (contenido, interacción, funcional,

configuración). Diseño (arquitectónico, navegación,

interfaz, de base de datos). Implementación. Pruebas.

1.4 Planificación de aplicaciones web.

Definición de los objetivos Diagrama de navegación. Definición de estilo

Definición de los objetivos El primer paso, para la creación de

páginas WEB bien estructuradas, es saber de antemano el mensaje que se desea transmitir. Las imágenes y los elementos a utilizar serán distintos si se plantea una WEB para vender un producto, o para dar información o para publicar un trabajo científico. En este último caso, la página debe dar una imagen más formal.

Definición de los objetivosBreve descripción de los contenidos de la página, su título principal, etc.Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc.Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente.Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas físicos, etc. para adaptar la página a sus características.Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos, etc

Actividad: Definir el objetivo del sitio

Redacte el objetivo del sitioEspecifique el tipo de audienciaBusque 3 sitios web que sean parecidos

al que quiere realizar.

Diagrama de navegación.

A continuación debes planificar cómo van a desplazarse los usuarios por ellas. Se debe realizar un diagrama de flujo claro para definir los índices principales, las páginas secundarias y las ramificaciones de todos los documentos.

Si utilizas una sola página WEB y esta es muy extensa deberás poner enlaces a las diferentes partes del documento al principio y al final de tu página y de esta forma facilitar la lectura de la misma, sin tener que depender tanto de las barras de desplazamiento.


En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior.

En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores.


Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista.

En red: Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una estructura más compleja y menos ordenada.

Actividad: Definir la estructura

Dibuje un diagrama de las paginas que contendrá el sitio

Tome en cuenta los enlaces obligatoriosInicioAcerca deContactoMapa

Definición de estilo

Una vez creada la estructura básica del WEB, se debe definir el estilo de las páginas.

Resulta práctico crearse una página de estilo para aplicar a todas las páginas que vayamos generando, incluyendo los logotipos, encabezados y pies.


Para empezar, que NO es aconsejable hacer: Largos textos en negativo (texto claro sobre fondo oscuro)

Imágenes de fondo estridentes o con colores vivos

Incluir demasiados tipos de letra diferentes

Representar el texto muy grande o muy pequeño

Gran profusión de GIFs animados o imágenes “robadas” de otras webs

Tablas con “Border”

Textos corridos “<Marquee>:” o "flashes"

Abusar de los anglicismos (ej: “link” por “enlace”)


Y lo que sí es recomendable: Aplicar márgenes a izquierda y derecha Utilizar negritas para destacar textos (con mesura, ¿eh?) Utilizar la etiqueta <P> para separar párrafos: así, ganamos en

legibilidad Maquetar siempre con tablas: esto a veces puede complicar el

código, pero es el mejor modo de representar correctamente los distintos elementos, y de contrarrestar el efecto “cross-browsing”, o cambio de navegador

CSS: las Hojas de estilo son una ayuda insustituible Por norma general (no siempre), JPGs para fotografías y GIFs para

dibujos Variar los colores, aunque sin pasarse Menú de navegación en todas las páginas: esto evitará perder en

un laberinto de enlaces a nuestros visitantes

Teoría del Color: Estudio de algunos colores

Es bien sabido por los psicólogos la influencia emocional que desencadenan los colores en el espíritu humano. Las respuestas emocionales varían enormemente dependiendo del color y de la intensidad de éste, así como de las diferentes combinaciones de colores que se pueden dar.


Normalmente cada color individual lleva asociado un conjunto de emociones y asociaciones de ideas que le es propio. Hay que destacar que estas emociones asociadas corresponden a la cultura occidental, ya que en otras culturas los colores pueden expresar sentimientos totalmente opuestos a los arriba indicados (por ejemplo, en Japón el color blanco simboliza la muerte).


Las sensaciones que producen los colores dependen de factores culturales y ambientales, y muchas veces de los propios prejuicios del usuario. Además hay que sumar a esto que no todas las personas ven los colores de la misma forma, ya que hay personas que sólo pueden ver bien la gama azul / naranja, otras la roja / verde y otras degeneran a la gama blanco / negro. Incluso se perciben los colores de forma diferente con el ojo derecho que con el izquierdo.

Teoría del Color: Estudio de algunos colores Rojo

El rojo es el único color brillante de verdad y puro en su composición. es exultante y agresivo. Es el símbolo de la pasión ardiente y desbordada, de la sexualidad y el erotismo. Es un color cálido, asociado con el sol y el calor, de tal manera que es posible sentirse más acalorado en un ambiente pintado de rojo, aunque objetivamente la temperatura no haya variado. Su nombre procede del latín "russus“. El rojo es el color de la sangre, de la pasión, de la fuerza bruta y del fuego Color fundamental, ligado al principio de la vida, sugiere vitalidad, entusiasmo, pasión, agitación, fuerza, sexo, calor, fuego, sangre, amor, audacia, valor, coraje, cólera, crueldad, intensidad y virilidad, estando asociado con sentimientos enérgicos, con la excitación apasionada o erótica. Es el color más sensual de todo el círculo cromático.

Teoría del Color: Estudio de algunos colores Verde

El verde es el color más tranquilo y sedante de todos. Es el color de la calma indiferente: no transmite alegría, tristeza o pasión. Está asociado a conceptos como Naturaleza, salud, dinero, frescura, crecimiento, abundancia, fertilidad, plantas, bosques, vegetación, primavera, frescor, esmeralda, honor, cortesía, civismo y vigor. El verde que tiende al amarillo cobra fuerza activa y soleada; si en él predomina el azul resulta más sobrio y sofisticado.

Teoría del Color: Estudio de algunos colores- Azul

El color azul es el símbolo de la profundidad. Inmaterial y frío, suscita una predisposición favorable. La sensación de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde.

Es un color reservado y entra dentro de los colores fríos. Expresa armonía, amistad, fidelidad, serenidad, sosiego, verdad, dignidad, confianza, masculinidad, sensualidad y comodidad. Su nombre es de origen incierto, pero parece que procede del sánscrito "rajavarta" (rizo del rey).

Este color se asocia con el cielo, el mar y el aire. El azul claro puede sugerir optimismo. Combina muy bien con su complementario, el naranja, y con las variaciones de éste, siendo típicos los fondos azules con textos naranjas, sobre todo en dinteles con logotipo.

Teoría del Color: Estudio de algunos colores- Azul

El color amarillo es el color más luminoso, más cálido, ardiente y expansivo.

Es un color optimista, moderno, y denota alegría, entusiasmo, pasión, fuerza, sexo, calor, primavera, inocencia, infancia, juventud. También se usa para expresar peligro y precaución. Es el color del sol, de la luz y del oro, y como tal es violento, intenso y agudo.

Si es muy brillante puede indicar peligro, y si es muy suave puede sugerir delicadeza. Un entorno amarillo medio o pálido hace a la gente sentirse cómoda, caliente. El amarillo llama mucho la atención en un entorno o composición, utilizándose a menudo en elementos que conviene hacer visibles. Es el color que fatiga mas a la vista humana, porque causa una estimulación visual excesiva, pudiendo originar sensación de irritabilidad en las personas.

Actividad: Definir el estilo

Especifique la paleta de colores que utilizara en el sitio web.

Busque imágenes en internet para incluirlas en el sitio.

Defina los tipos de letra.

Busque textos interesantes y cópielos en el block de notas.

C1 arquitectura.

Education

Transcript of C1 arquitectura.