Sai kiran anagani 5ntkpxqt54y unsplash

Aplicaciones Web

  • DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES

    DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
    ASIGNATURA: PROGRAMACIÓN WEB ELABORADO POR: MIRANDA GRANADOS NAYELLI JOCELYN 173107036 DOCENTE: OSCAR OLIVARES GRUPO: 381-M PERÍODO: 2020-2
  • Vannevar Bush

    Vannevar Bush
    Artículo: As we may think
    Dispositivo llamado Memex para crear/seguir
    enlaces entre documentos y microfichas
  • Period: to

    Prehistoria

  • Period: to

    Arquitectura tecnológica

    Antes de poder entrar a definir lo que es la arquitectura web primero es necesario enmarcarla correctamente. Dentro del sector de las tecnologías de la información hay diversos roles relacionados con la arquitectura, pero básicamente podríamos hacer la siguiente división:
  • Period: to

    Arquitectos de sistemas

    conjugan distintos elementos hardware (máquinas y otros dispositivos) con elementos software (sistemas operativos) para construir sistemas capaces de ofrecer los recursos que necesitan las distintas aplicaciones o servicios destinados a correr sobre ellos.
  • Period: to

    Arquitectos de datos

    diseñan cómo se va a estructurar la información manejada por las aplicaciones mediante el uso de bases de datos.
  • Period: to

    Arquitectos de almacenamiento

    diseñan redes de almacenamiento (SAN) que permitan almacenar toda la información que generan las distintas aplicaciones que corren sobre los sistemas de información.
  • Period: to

    Arquitectos de redes

    planean y diseñan las redes de comunicación que permitan el intercambio de datos entre distintos sistemas de información.
  • Period: to

    Arquitectos de software

    más típicamente conocidos como ingenieros de software, diseñan y construyen las aplicaciones que van a permitir ofrecer el servicio que necesitan los usuarios de los sistemas de información u otras aplicaciones.
  • Period: to

    Arquitectura web

    Sería en este último grupo donde se encuadrarían los arquitectos web, como un subgrupo de los arquitectos de software especializado en diseñar y contruir aplicaciones que se van a utilizar a través de lo que conocemos como la Web, es decir, haciendo uso del protocolo HTTP para comunicarse con el usuario o con otras aplicaciones web.
  • Period: to

    Diseño de la interfaz de usuario

    En el caso de un sitio web se referiría al diseño de la propia web, tanto su aspecto visual (colores, imágenes, tipografía empleada, posicionamiento de los distintos bloques de contenido dentro de las distintas páginas, etc.). Distintas disciplinas como las del diseño gráfico, la usabilidad, la experiencia de usuario (UX), la interacción usuario-máquina, los mapas del sitio o mapas web, etc., así como distintos términos como HTML5, CSS, DOM, Javascript, AJAX, estándares web, etc.
  • Period: to

    Diseño e implementación de la lógica de la aplicación

    es decir, del conjunto de funcionalidades que ofrecerá ésta, como el procesamiento de los datos introducidos por el usuario, el cálculo de resultados a partir de distintos datos de entrada, el diseño y ejecución de algoritmos, la manipulación de la información almacenada en una base de datos, la ejecución de diversas acciones como consecuencia del cumplimiento de diversas condiciones o del disparo de algún evento, etc.
  • Period: to

    Diseño de la arquitectura de la información

    es decir, determinar la información del mundo real que tendrá que tratar una aplicación, diseñar un modelo conceptual que sea un fiel reflejo de dicho mundo real con sus distintas entidades y relaciones entre dichas entidades, determinar el modelo de datos que mejor se adapte a dicho modelo conceptual, implementar ese modelo de datos sobre un motor de bases de datos concreto y trasladar a él la información necesaria para el correcto funcionamiento de nuestra aplicación.
  • Period: to

    PLANIFICACIÓN DE APLICACIONES WEB.

    No importa cuál sea el tamaño del proyecto, es fundamental crear un Plan de Proyecto que capture la toma de decisiones, y que, cuando el proyecto sea lanzado, sirva como archivo documental de todos los procesos estratégicos inherentes al proyecto.
  • Period: to

    Definición del Proyecto

    Descubrimiento Entrevistas a las partes interesadas (clientes, proveedores, etc.)
    Análisis de la competencia
    Estudio de los Perfiles de audiencia o Investigación de la audiencia/mercado: Perfiles de las audiencias principales y secundarias o Capacidades y Restricciones de la audiencia: habilidades, expectación, necesidades típicas, requerimientos de navegador/plataforma, etc.
  • Period: to

    Análisis

    Finalidad última del site
    Funcionalidades y contenidos necesarios en el producto final
    Capacidades internas de la empresa: recursos financieros y recursos de personal (equipo)
  • Period: to

    Estrategia

    Objetivos de negocio: primarios y secundarios
    Estrategia de comunicación: tono y estilo (resumidos en un briefing creativo)
    Métricas de éxito
    Plan de Marketing
    Alcance: decidir qué hacer ahora y qué puede esperar para una segunda fase
  • Period: to

    Plan de Proyecto (Borrador)

    Resumen del Proyecto
    Estrategia
    Audiencia
    Requerimientos o Funcionales/Interactivos o Contenidos o Visuales
    Alcance
    Métricas de éxito
    Marketing
    Mantenimiento y soporte posterior
    Desarrollo futuro
    Equipo y roles
    Relación con el cliente (gestión de la cuenta)
    Ciclo de aprobación
    Presupuesto
    Timming
  • Period: to

    Diseño Estructural

    Inventario del contenido existente: textos, imagines, vídeos, incluyendo fuentes que no provengan de la web (libros, fotografías, etc…).
    Contenido que tenga que ser creado o editado (imágenes, textos, traducciones, vídeos, etc…).
    Responsabilidades de autoría y edición (equipo: asignación de recursos).
    Plan de mantenimiento de contenidos.
  • Period: to

    Definición Funcional

    Requisitos Funcionales o Planificación de usuario.
    Requerimientos de tecnología
    Requerimientos de planificación e integración o Integración de Marketing: marketing mediante via postal, email, teléfono u otros medios o Planificación del Back-office e integración de éste con la base de datos
    Requisitos de Soporte o Plan de soporte al usuario final o Formación o contratación de personal interno o Mantenimiento del site en curso
    Responsabilidades internas
    Responsabilidad de los Proveedores
  • Period: to

    Diagramas a nivel de Site y de Página

    Arquitectura de la Información
    Mapa del Site
    Wireframes: representación esquemática de las páginas
    Convenciones de Nombres y Etiquetas (Nomenclaturas)
  • Period: to

    Recopilación y Creación de Contenidos

    Autoría de Contenidos Creación y edición de contenidos de acuerdo con la arquitectura de información del site y de los diagramas de las páginas; para reutilización de los contenidos es recomendable que se preparen directamente para la web
    Determinación del origen de las fotografías, vídeos e ilustraciones
  • Period: to

    Diseño Visual

    Diseño Gráfico del Site Aplicación de la marca e identidad visual
    Fotografía, Vídeo e Ilustración
    Obtención de los Componentes de diseño
    Prototipo de baja resolución
  • Period: to

    Producción

    Instalación y configuración del Servidor y del Hosting
    Desarrollo de los datos y/o de la base de datos
    Desarrollo de la aplicación
    Desarrollo y/o Integración del sistema de gestión de contenidos (CMS)
    Diseño y desarrollo de las páginas y plantillas: HTML, CSS, JavaScript (y/o otros scripts cliente a nivel de página).
    Diseño de elementos reutilizables: gráficos, navegación, META tags, etc.
    Pruebas de Control de Calidad
  • Period: to

    Construcción del Site

    Asignación de contenidos de prueba
    Aplicación de estilos
    Integración de datos, aplicaciones u otras funcionalidades
    Almacenamiento en el servidor de desarrollo (para pruebas)
  • Period: to

    Pruebas de Calidad

    Prueba de los contenidos y revisión de los mismos: comprobación de enlaces, revisión de textos e imágenes, etc.
    Pruebas funcionales: pruebas sobre la aplicación y sobre elementos interactivos
    Pruebas de integración
    Pruebas de navegación
    Planificación final del proceso de calidad
    Pruebas en los distintos navegadores
  • Period: to

    Revisión

    Revisión por parte de las partes implicadas (clientes, etc.) y aprobaciones finales.
  • Period: to

    Lanzamiento

    Puesta en Marcha Lanzamiento previo con base de datos con pocos usuarios; lanzamiento progresivo con la base de datos completa
    Marketing sobre el site
    Posicionamiento del site (SEP)
    Soporte de usuarios
  • Period: to

    Mantenimiento

    Puesta del site en manos del equipo de mantenimiento
    Métricas sobre el site: recuperación de datos (informes), reportes y monitorización
    Establecimiento como site inicial o realización de ajustes en la planificación.
  • J.C. R. LickLider

    J.C. R. LickLider
    Visión de red global de ordenadores
    Red intergaláctica
  • Ted Nelson

    Ted Nelson
    Ted Nelson: Hipertexto
    Proyecto Xanadú
  • Douglas Englebart

    Douglas Englebart
    Sistema NLS (Online System), Stanford
    The Mother of All Demos
    Primer sistema con ratón, texto interactivo, videoconferencia, tele-conferencia, email e hipertexto
  • ARPA

    ARPA
    Conexión de primeros nodos ARPANET:
    UCLA, SRI, UCSB, Utah
  • Vinton Cerf, Robert Kahn

    Vinton Cerf, Robert Kahn
    1974 Protocolo TCP
    1978 Se divide parte de TCP en IP
    TCP/IP
  • Tim Berners-Lee y la Web

    Tim Berners-Lee y la Web
    1980 Primer periodo de TBL en el CERN
    Implementa ENQUIRE ( directorio) en Pascal 1984 Vuelve al CERN
    Implementa sistema RPC 1989 Propuesta: Information Management: A proposal
    Mesh  World wide web
  • Paul Mockapetris

    Paul Mockapetris
    Introduce el sistema DNS
    Facilita la utilización de nombres lógicos de dominio
  • IETF

    IETF: Internet Engineering Task Force
    Creación de estándares RFC de Internet
    Relacionados con la Web: TCP/IP, URI, HTTP
    Organización abierta formada por voluntarios
  • IANA

    IANA: Internet Assigned Names and Numbers
    Authority
    Contrato entre Departamento de Defensa y el
    Information Sciences Institute (Univ. Southern
    California)
    Gestión personal por John Postel
  • Inicio de la Web 1.0

    Inicio de la Web 1.0
    La Web nació de la mano de Tim Berners-Lee el inventor del hipertexto y en el comienzo solo eran textos e imágenes “subidas” a una computadora conectada a la red, la Web 1.0 es de sólo lectura.
  • Period: to

    La web 1.0, 2.0 y 3.0

  • Primer navegador

    Implementado en NEXT
  • El HTML y la Web 1.0

    A principios de 1990, Tim Berners-Lee define por fin el HTML, crea el primer navegador web, ViolaWWW, que funcionaría en modo texto, y el uso de framesets o Marcos además de efectos como el parpadeo y las marquesinas, botones GIF, etc, que hacian más dinámica a la red.
  • Web 1.0

    Web 1.0
    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.
    • Pocos productores de contenidos (minoría con conocimientos de lenguaje de programación)
    • Muchos lectores de esos contenidos (es web de solo lectura)
    • Páginas estáticas: la actualización de los sitios web y sus documentos no se realiza de forma periódica
    • Sitios direccionales y no colaborativos.
  • Period: to

    Nacimiento de la Web

  • Presentación en sociedad

    Presentación en sociedad
    Conferencia Hypertext 91. Presentación de Tim Berners-Lee
  • Primer Navegador de texto

    Primer Navegador de texto
    Line-Mode Browser (Nicola Pellow)
    Formaba parte de la librería libwww
  • Surgimiento de la Web 1.0

    Surgimiento de la Web 1.0
    Consiste en un boche de documentos navegadores visuales como IE, web conectados por medio de hipervínculos, el usuario no podía interactuar.
  • Tim Berners Lee, Crea la Word Wide Web.

    Crea la Word Wide Web (WWW)
    • Propuso un nuevo sistema de «hipertexto»
    • Hypertext Markup Lenguaje <HTML>
  • La Web cruza el charco

    La Web cruza el charco
    Primer servidor web en USA
    Instalado en Stanford University por Paul Kunz
  • Nuevos navegadores

    Nuevos navegadores
    Erwise
    ViolaWWW
    NCSA Mosaic, X-Windows
  • La web y su uso gratuito para todo el público.

    La web y su uso gratuito para todo el público.
    La Web fue creada alrededor de 1989 por el inglés Tim Berners-Lee con la ayuda del belga Robert Cailliau mientras trabajaban en el CERN (Consejo Europeo para la Investigación Nuclear), el cual anunció que la web sería gratuita para todos, sin ningún tipo de honorarios.
  • Carcterísticas de la Web 1.0

    Carcterísticas de la Web 1.0
    Características:
    1. La web 1.0 era estática y por lo general únicamente informativa.
    2. Usuario son solo lectores.
    3. Interacción reducida a formularios de contacto, inscripciones y boletines.
    4. Sitios direccionales y no colaborativos.
    5. Interacción línea emisor – receptor.
    6. Conectado con enlaces (Personas conectándose a la Web).
  • Más navegadores

    Más navegadores
    Netscape (nuevo nombre de Mosaic Com.)
    Opera (proyecto de investigación de Telenor)
  • Mosaic Communications

    Mosaic Communications
    Con el tiempo Mosaic se
    convertirá en Netscape
  • Nace el consorcio W3c

    Nace el consorcio W3c
    Finales de 1994 se crea el Consorcio W3c
    Se establece entre el CERN y el MIT
    Tim Berners-Lee se traslada al MIT
  • Servidores Web

    Servidores Web
    1994 Netsite Communications Server (Netscape)
    Ofrece servidor con SSL
    1995 OpenMarket Web Server
    1995 Apache
    Es una versión del servidor de NCSA
  • Directorios

    Directorios
    1991 WWW Virtual Library
    Iniciada por Tim Berners-Lee
    1995 Yahoo! (Jerry Yang, David Filo)
    Se convertirá en buscador, portal, servicios, etc.
    Otros:
    StartingPoint, qango, botw, etc.
    1998 Open Directory Project
  • Páginas Dinámicas

    Páginas Dinámicas
    Netscape 2.0 incorpora JavaScript
    Se populariza el uso de DHTML
  • Buscadores

    1994 Lycos
    1994 Infoseek
    1995 Altavista
  • Period: to

    Crecimiento de la Web

  • W3c toma las riendas

    1996 HTML 3.2
    HTML 2.0 había sido definido en IETF
    1996 Hojas de estilos: CSS 1
  • Hojas de estilo

    Primera propuesta de CSS
    CSS = Hojas de estilo en cascada
    Separa estructura (HTML) - presentación (CSS)
    Los estilos se integran incrementalmente
    Permite combinar preferencias de estilo entre
    usuario, diseñador, navegador…
  • XML

    XML
    1996 XML
    Simplificación de SGML (años 70)
    Lenguaje de intercambio
    Validación de documentos
    Servicios Web
  • Multimedia en la Web

    Nacimiento de Flash
    Originalmente FutureSplash (de FutureWave)
    FutureWave fue comprado por Macromedia
    FutureSplash se renombra como Flash 1.0
  • Aparece Google

    Aparece Google
    Larry Page y Sergei Brin fundan Google
    Estudiantes de doctorado (Stanford)
    Algoritmo PageRank
    1996 Programa en Java y Python llamado BackRub
  • ICANN

    ICANN
    ICANN: Internet Corp. For Assigned
    Names and Numbers
  • Web 2.0

    Web 2.0
    • Permite a sus usuarios interactuar con otros usuarios o cambiar contenido del sitio web, en contraste a sitios web no-interactivos donde los usuarios se limitan a la visualización pasiva de información que se les proporcion
    • Utilización de redes sociales al manejar usuarios y comunidades.
    • Se da control total a los usuarios en el manejo de su información.
    • Usuarios = Producidores (Productores y, a su vez, consumidores) de contenido.
    • Web colaborativa (crear contenido y valor entre todos)
  • Aparición de la Web 2.0

    Aparición de la Web 2.0
    El término fue utilizado por primera vez por Darcy DiNucci en 1999 en uno de sus artículos http://www.darcyd.com/fragmented_future.pdf, aunque no fue hasta 2004 cuando Tim O'Reilly lo hizo popular.
  • Tim O’Reilly definiera la Web 2.0

    Tim O’Reilly definiera la Web 2.0
    O’Reilly definiera la Web 2.0 como un nuevo paradigma.
  • Period: to

    Web 2.0

  • Web 2.0 que ofrece de nuevo a lo existente.

    Web 2.0 que ofrece de nuevo a lo existente.
    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.
  • W3c apuesta por HTML5

    Tim Berners-Lee y W3c aceptan HTML5
    Reconoce que XHTML 2 no es buena idea
    Grupo de trabajo conjunto: W3c + Whatwg
  • Caracteristicas del la Web 2.0

    Características:
    1. La web 2.0 es interactiva, el internet esta definido para los usuarios, quienes participan en el contenido creándolo.
    2. La Web 2.0 está orientado a la interacción y redes sociales, actúa más como puntos de encuentro.
    3. Los usuarios se transforman en productores de contenidos.
    4. Posibilidad de publicar informaciones y realizar cambios en los datos sin necesidad de muchos conocimientos tecnológicos.
    5. Destinada a la navegación (Personas conectándose a personas).
  • Google Chrome

    Se basa en WebKit
    Máquina Javascript V8
  • Web 3.0.

    Web 3.0.
    Es un neologismo que se utiliza para describir la evolución del uso y la interacción en la red a través de diferentes caminos. Ello incluye, la transformación de la red en una base de datos, un movimiento hacia hacer los contenidos accesibles por múltiples aplicaciones non-browser, el empuje de las tecnologías de inteligencia artificial, la web semántica,
    la Web Geoespacial.
    • Nueva etapa destinada a añadir significado a la web.
    • Combinación efectiva entre la inclusión de contenido semántico
  • Tim Berners Lee. Creador de la web semántica

    Web Semántica La Web semántica consiste en añadir metadatos a la WWW. El creador de la idea fue Tim Berners Lee.(2007) Esta información añadida (contenido, significado y relación) deben ser dada de manera formal, de forma que sea posible web semántica evaluarlas automáticamente por máquinas
  • Flash vs HTML5

    2010 Steve Jobs anuncia que no dará
    soporte a Flash
    2011 Adobe anuncia soporte para HTML5
  • Period: to

    Web Social y en Tiempo Real

    Guerra de navegadores
    Web Semántica
    Inteligencia Artificial
    Mundos Virtuales
    Movilidad
    Economía de la Atención
    Sitios Web como Servicios
    TV en la Web
    Computación en la Nube
    Internacionalización
    Personalización
  • Futuro de la evolución Web 3.0

    Futuro de la evolución Web 3.0
    Las tecnologías de la Web 3.0, como programas inteligentes, que utilizan datos semánticos, se han implementado y usado a pequeña escala en compañías para conseguir una manipulación de datos más eficiente. En los últimos años, sin embargo, ha habido un mayor enfoque dirigido a trasladar estas tecnologías de inteligencia semántica al público general; con la utilización de "Data Web", inteligencia artíficial, la Web semántica y su evolución al uso de ambientes 3D.