Aplicaciones Web - Past Paper PDF 2015-2016

2015-2016 Bloque 3 - Tema 8 APLICACIONES WEB. DESARROLLO FRONT-END Y EN SERVIDOR, MULTIPLATAFORMA Y MULTIDISPOSITIVO. LENGUAJES: HTML, XML Y SUS DERIVACIONES. NAVEGADORES Y LENGUAJES DE PROGRAMACIÓN WEB. LENGUAJES DE SCRIPT PREPARACIÓN OPOSICIONES TÉCNICOS AUXILIARES DE INFORMÁTICA B3T8 APLICACIONES WEB TAI ÍNDICE ÍNDICE............................................................................................................................................................ 2 1. APLICACIONES WEB, NATIVAS, HÍBRIDAS Y PWA...................................................................................... 3 1. Aplicaciones NATIVAS........................................................................................................................... 3 2. Aplicaciones WEB................................................................................................................................. 4 3. Aplicaciones HÍBRIDAS......................................................................................................................... 6 4. Aplicaciones PWA................................................................................................................................. 9 5. Comparativa tipos de aplicaciones móviles........................................................................................ 11 2. ARQUITECTURAS PARA APLICACIONES WEB........................................................................................... 12 1. MVC (Modelo-Vista-Controlador)...................................................................................................... 12 2. MVP (Modelo-Vista-Presentador)...................................................................................................... 13 3. MVVM (Modelo-Vista-VistaModelo).................................................................................................. 14 4. MVW (Modelo-Vista-Whatever)........................................................................................................ 14 5. Flux..................................................................................................................................................... 14 3. DESARROLLO FRONT-END Y EN SERVIDOR, MULTIPLATAFORMA Y MULTIDISPOSITIVO......................... 15 1. Front-end............................................................................................................................................ 15 2. Back-end............................................................................................................................................. 15 3. Stacks disponibles............................................................................................................................... 16 4. LENGUAJES: HTML, XML Y SUS DERIVACIONES....................................................................................... 17 1. HTML (HyperText Markup Language)................................................................................................ 17 2. XML (eXtensible Markup Language).................................................................................................. 17 3. XSL (eXtensible Stylesheet Language)................................................................................................ 26 4. Lenguajes basados en XML................................................................................................................ 26 4. XOP (XML-binary Optimized Packaging)............................................................................................ 27 5. CSS...................................................................................................................................................... 27 6. Web semántica................................................................................................................................... 27 5. NAVEGADORES Y LENGUAJES DE PROGRAMACIÓN WEB........................................................................ 29 1. Navegadores web............................................................................................................................... 29 2. Lenguajes de programación web....................................................................................................... 31 6. LENGUAJES DE SCRIPT............................................................................................................................. 32 PABLO ARELLANO www.theglobeformacion.com Página 2 B3T8 APLICACIONES WEB TAI 1. APLICACIONES WEB, NATIVAS, HÍBRIDAS Y PWA Una aplicación web es un tipo de aplicación alojada en un servidor web que es accesible a través de un navegador web. Tipos de aplicaciones: - Nativas. - Web. - Híbridas. - PWA. 1. Aplicaciones NATIVAS Una aplicación nativa es la que se desarrolla de forma específica para un determinado sistema operativo (Windows, macOS, S.O. para móviles). Cada una de las plataformas (Android o iOS por ejemplo) tienen un sistema diferente, por lo que si queremos que una app esté disponible en todas las plataformas se deberá desarrollar la misma app varias veces, una para cada plataforma. PABLO ARELLANO www.theglobeformacion.com Página 3 B3T8 APLICACIONES WEB TAI Tecnologías utilizadas: - Las apps para iOS se desarrollan con lenguaje Objective-C y Swift. El IDE utilizado es Xcode. - Las apps para Android se desarrollan con lenguaje Java y XML. Actualmente el lenguaje Kotlin ha cobrado mucha fuerza en la comunidad de desarrolladores, utilizando el IDE IntelliJ IDEA. Android Studio es el IDE desarrollado por Google, con un uso elevado. Ventajas: - Adaptación perfecta al dispositivo concreto, siendo posible acceder a todas las características del hardware del dispositivo: cámara, GPS, agenda, almacenamiento... - Ofrecen la mejor experiencia de usuario. - Rendimiento muy alto. - No necesitan conexión a internet para funcionar. - La descarga e instalación de estas apps se realiza a través de las tiendas de aplicaciones. - Envío de notificaciones o avisos a los usuarios (notificaciones push o mobile push). - Actualización constante de la app. Inconvenientes: - Costes y tiempos de desarrollo elevado ya que hay que desarrollar la aplicación para cada plataforma concreta usando las tecnologías propias de cada una. - Requiere el conocimiento de varios lenguajes nativos (como Kotlin o Swift) para poder ser desarrollada y distribuida en todas las plataformas. - Mantenimiento de varias fuentes de código. - El código no es reutilizable entre las distintas plataformas. - Actualización costosa y no inmediata, ya que hay que subir la nueva versión a las distintas tiendas y cada usuario tiene que actualizarla. 2. Aplicaciones WEB Una aplicación web o webapp es una app que se ejecuta dentro del propio navegador web del dispositivo a través de una URL y es desarrollada con las tecnologías HTML, CSS y JavaScript. En definitiva, una webapp no es más que páginas web servidas por un servidor web (como Apache o Nginx). La principal ventaja de este tipo de app con respecto a la nativa es la posibilidad de programar independiente del sistema operativo en el que se usará la aplicación. De esta forma se pueden ejecutar en diferentes dispositivos con sistemas operativos PABLO ARELLANO www.theglobeformacion.com Página 4 B3T8 APLICACIONES WEB TAI distintos sin tener que crear varias las aplicaciones. Imprescindible el diseño web adaptable para los distintos dispositivos existentes. Otras ventajas: - El coste y tiempo de desarrollo es reducido. Solo se desarrolla una app y las tecnologías utilizadas son sencillas. - No necesitan ser instaladas/actualizadas/desplegadas en los dispositivos del usuario. Siempre se dispone de la última versión y está disponible en el servidor web. El gran inconveniente es que las webapp NO tienen acceso a los recursos del dispositivo. Otros inconvenientes: - No disponible en las tiendas de aplicaciones. - No dispone del icono de acceso de forma directa en la pantalla del móvil. - Necesita conexión a internet. - La experiencia del usuario (UX) y el tiempo de respuesta es inferior en comparación con una app nativa. Un framework para desarrollo de webapp para Java es Vaadin. Como alternativa para alojar una app móvil tenemos Firebase, que es una plataforma desarrollada por Google que facilita el desarrollo de apps, proporcionando un servidor backend para las aplicaciones. Además, el mismo backend puede ser utilizado de forma común en diversas plataformas: Android, IOS y web. Tecnologías JAVA EE / JAKARTA EE.NET - Lenguajes programación: Java. - Lenguajes programación: C#, F#, VB. - Entornos de desarrollo: Eclipse, IntelliJ - Entornos de desarrollo: Visual Studio. IDEA. - Tecnologías web: ASP.NET, ASP.NET Core. - Frameworks desarrollo: Spring, Spring - Servidor web: IIS, Apache, Nginx, Kestrel. Boot, Spring MVC. - Tecnologías servidor: clases modelo.NET, - Tecnologías web: Servlet, JSP, JSF. WCF. - Servidor web: Apache, Nginx, Tomcat. - Persistencia datos: ADO.NET, NHibernate, - Tecnologías servidor aplicaciones: clases Entity Framework. modelo Java, WS, EJB. - Servidores aplicaciones: Wildfly, Eclipse GlassFish - Persistencia datos: Hibernate, OpenJPA, EclipseLink. PABLO ARELLANO www.theglobeformacion.com Página 5 B3T8 APLICACIONES WEB TAI 3. Aplicaciones HÍBRIDAS Una aplicación híbrida es una combinación de las dos anteriores (nativa y web) recogiendo lo mejor de cada una de ellas. Es una app web dentro de una app nativa. Las apps híbridas se desarrollan con tecnologías propias de las webapp (HTML, CSS y JavaScript) por lo que se pueden usar en diferentes plataformas, pero también dan la posibilidad de acceder a gran parte de las características del hardware del dispositivo. Una vez desarrollado el código, se compila para las distintas plataformas (Android, iOS…), ahorrando costes y tiempos de desarrollo. El formato de empaquetado de la app es.app (Apple Store) y.apk (Google Play). La app desarrollada se visualiza en un WebView (no mediante un navegador web) que es un navegador integrado en una aplicación nativa y es lo que permite acceder a los recursos hardware específicos del dispositivo a través de plugins. El WebView ejecuta y representa contenidos web dentro de la app, pero sin incluir la barra de direcciones y otros elementos típicos del navegador. Así, la presentación del contenido tiene el mismo efecto que la IU de una app nativa. La principal ventaja de las aplicaciones híbridas es que son independientes del sistema operativo (plataforma). Consecuencia de esto es la reducción del coste y tiempos de desarrollo respecto a las apps nativas, ya que no requiere mantener varios desarrollos (uno por sistema operativo). Otras ventajas: - Las apps son distribuidas a través de las tiendas de aplicaciones. Requiere instalación en el dispositivo cliente. - Solo se realiza un único desarrollo. Por contra, el principal inconveniente de este tipo apps respecto a las apps nativas, es que la experiencia de usuario no es tan buena como en estas y que el rendimiento y la velocidad de carga es mucho más lenta que una app nativa. Framework de desarrollo - Ionic: framework de código abierto para el desarrollo de aplicaciones híbridas basado en tecnologías web (HTML, CSS y JavaScript). Permite el desarrollo de un único proyecto y, posteriormente, la generación del ejecutable y su despliegue en múltiples plataformas, adaptando el aspecto de la IU a las características específicas de cada una de ellas. Se puede usar con los frameworks front-end más populares, como Angular, React y Vue.js. PABLO ARELLANO www.theglobeformacion.com Página 6 B3T8 APLICACIONES WEB TAI La gran ventaja de crear apps con Ionic es que tenemos a nuestra disposición todos los plugins de Cordova o Capacitor que nos dan acceso a las funcionalidades móviles: cámara, GPS, acelerómetros. - Apache Cordova: framework de desarrollo móvil de código abierto que utiliza tecnologías web (HTML, CSS y JavaScript) para el desarrollo multiplataforma. Las aplicaciones se ejecutan dentro de envolturas dirigidas a cada plataforma y dependen de enlaces API conformes con los estándares para acceder a las capacidades de cada dispositivo, como sensores, datos, estado de la red, etc. PABLO ARELLANO www.theglobeformacion.com Página 7 B3T8 APLICACIONES WEB TAI - Capacitor: framework de app móviles de código abierto formado por conjunto de APIs que a través de plugins permiten acceder a las capacidades de cada dispositivo. Se utiliza junto con Ionic. La principal diferencia entre Capacitor y Apache Cordova es que el primero también se puede utilizar en PWA. - PhoneGap: framework de desarrollo de app móvil híbridas de código abierto y propiedad de Adobe que al adquirirlo le cambió el nombre de Apache Cordova. Actualmente Adobe no ofrece soporte desde octubre de 2020, recomendando migrar a Apache Cordova. - React Native: framework de código abierto para crear aplicaciones Android e iOS utilizando React y las capacidades nativas de la plataformas. React Native utiliza JavaScript para acceder a las API de la plataforma así como para describir la apariencia y el comportamiento de su IU utilizando componentes React. Cat Cafe Menu ViewGroup Cat Cafe Menu ImageView TextView Maru Maru Spot Spot Pouncival Pouncival Pouncival Rum Tum Tugger Rum Tum Tugger Tabby Tabby Tuna Tuna UIImageView UITextView Mrs. Norris Mrs. Norris UIView Choupette Choupette - jQuery Mobile: framework para IU basado en HTML5 para crear sitios y apps web adaptables a cualquier dispositivo, solo con una única versión del código. - Flutter: framework de código abierto creado por Google para desarrollo de IU en Android y iOS, aunque actualmente, con la misma versión de código alcanza también sistemas Windows, macOS y Linux. En lugar de trabajar con el patrón MVC, Flutter funciona principalmente con widgets. Este framework utiliza el lenguaje Dart (también desarrollado por Google). - Framework7: framework de código abierto para el desarrollo de aplicaciones móviles híbridas o web basado en tecnologías web (HTML, CSS y JavaScript) con un aspecto nativo de iOS y Android. - Xamarin: plataforma de código abierto para desarrollar aplicaciones móviles multiplataforma. Utiliza C# como lenguaje de programación y el IDE Visual Studio. PABLO ARELLANO www.theglobeformacion.com Página 8 B3T8 APLICACIONES WEB TAI -.NET MAUI (Multi-platform App UI): framework multiplataforma de código abierto para crear aplicaciones móviles y de escritorio nativas con C# y XAML que se pueden ejecutar en Android, iOS, macOS y Windows desde una sola base de código compartida. Es la evolución de Xamarin.Forms. - NativeScript: framework de código abierto para desarrollo de aplicaciones móviles para iOS y Android. Utiliza JavaScript o TypeScript como lenguaje de programación. Destaca por el uso de las mismas APIs que las aplicaciones nativas (desarrolladas en Xcode o Android Studio). No hace uso de webview, sino de un motor de renderizado propio. Por último, es posible su integración con Angular y Vue.js. 4. Aplicaciones PWA Las Progressive Web Apps o PWA son aplicaciones ejecutadas directamente en el navegador (como una webapp) pero tienen una experiencia similar a una aplicación nativa. Es la tendencia actual en el desarrollo de aplicaciones web para móviles. Según su definición, PWA es: - Una Aplicación: de funcionamiento similar a una app nativa. - Web: ejecutable directamente desde el navegador (como una webapp). En la pantalla de inicio se guarda un acceso directo a la aplicación. - Progresiva: pueden crecer en contenido y funcionalidades, mejorando la experiencia de usuario cuanto más se utilicen (gracias a la caché de la app). Las tecnologías usadas en PWA son HTML, CSS y JavaScript, aunque su funcionalidad se basa en diferentes pilares: - Service Worker: es un fichero JavaScript que se ejecuta en segundo plano y separado del navegador en el dispositivo del usuario. Se encarga de almacenar una copia de los datos en caché mientras se tiene conexión a internet para poder usar la PWA de forma offline, de las notificaciones push, de sincronizar datos en segundo plano o de recibir actualizaciones centralizadas. PABLO ARELLANO www.theglobeformacion.com Página 9 B3T8 APLICACIONES WEB TAI Posteriormente, ante la misma solicitud, el Service worker escucha solicitud, la solicita Service worker devuelve la petición al servidor y almacena la copia en la caché directamente de la caché sin acceder al servidor - Manifiesto de la aplicación: su función es especificar las características la app. El manifiesto es un archivo (manifest.json) en formato JavaScript JSON. Hay algunos principios clave que una aplicación web debe tratar de observar para ser identificada como PWA. Estos deben ser: - Detectable: puede encontrarse a través de motores de búsqueda. - Instalable: está disponible en la pantalla de inicio del dispositivo como si se tratara de una app nativa. - Enlazable/Vinculable: puede ser compartida simplemente enviando una URL. - Independiente de la red: funciona sin conexión (offline) o con una deficiente conexión de red. - Progresiva: mejora de la experiencia de usuario conforme aumenta el uso de la app por parte del usuario. - Reconectable: puede recibir notificaciones push cuando haya contenido nuevo disponible incluso si la app no está activa. - Adaptable: se puede utilizar en cualquier dispositivo con pantalla y navegador: móviles, tabletas, portátiles, TVs... - Segura: las conexiones entre el usuario, la app y el servidor están protegidas contra terceros (https). Las principales ventajas de las PWA son: - Son ligeras ya que no dejan de ser webs. - Son multiplataforma, accesibles desde cualquier dispositivo (ordenador, tablet, móvil…). - Sin necesidad de instalación, ya que no hace falta que el usuario se descargue e instale ningún tipo de aplicación en el dispositivo. PABLO ARELLANO www.theglobeformacion.com Página 10 B3T8 APLICACIONES WEB TAI - Actualizada, mostrando siempre la última versión al usuario sin necesidad de realizar ninguna acción. - En la pantalla de inicio se puede guardar un acceso directo a la app. - Offline, posibilitando permitiendo el acceso sin conexión a Internet. - Es segura (https). Inconvenientes de las PWA: - No disponibles en tiendas de aplicaciones. - Mayor consumo de batería que una app nativa. - No proporcionan acceso a todas las características del dispositivo. Hay que tener cuidado de no confundir una PWA con una aplicación híbrida, a pesar de tener muchas características en común. Las PWA se ejecutan directamente en el navegador, las híbridas no (webview). Las PWA no están disponibles en las tiendas de aplicaciones, las híbridas sí. Framework y herramientas de desarrollo - PWABuilder: herramienta que permite a los desarrolladores generar aplicaciones PWA a partir de webapp existentes. - Lighthouse: herramienta automatizada de código abierto desarrollada por Google que proporciona servicios de monitorización del rendimiento de la app. - Angular. - React. - Vue.js. - Ionic y Capacitor. 5. Comparativa tipos de aplicaciones móviles Apps disponibles en Acceso a las características tiendas de aplicaciones hardware del dispositivo App web û û App nativa ü ü App híbrida ü ü App PWA û PARCIAL PABLO ARELLANO www.theglobeformacion.com Página 11 B3T8 APLICACIONES WEB TAI 2. ARQUITECTURAS PARA APLICACIONES WEB Las arquitecturas para aplicaciones web a tratar son: - MVC. - MVP. - MVVM. - MVW. - Flux. 1. MVC (Modelo-Vista-Controlador) (Ver B3T5) Este patrón, o modelo de abstracción, de desarrollo de software separa los datos de una aplicación, la interfaz de usuario y la lógica de negocio en tres componentes distintos. Se basa en la reutilización de código y la flexibilidad. Donde: - El Modelo contiene una representación de los datos que maneja el sistema, su lógica de negocio, y sus mecanismos de persistencia. Si el estado de los datos cambia el modelo lo notificará a la vista o al controlador (si se necesita una lógica diferente para controlar la vista actualizada) - La Vista, o interfaz de usuario, compone la información que se envía al cliente y los mecanismos interacción con éste. - El Controlador, actúa como intermediario entre el Modelo y la Vista, gestionando el flujo de información entre ellos y las transformaciones para adaptar los datos a las necesidades de cada uno. Es el punto de entrada a la aplicación. Funcionamiento de una aplicación MVC 1) Captura de la petición en el controlador La aplicación recibe peticiones que son centralizadas en el Controlador. Éste es el encargado de interpretar, a partir de la URL de la solicitud, el tipo de operación que hay PABLO ARELLANO www.theglobeformacion.com Página 12 B3T8 APLICACIONES WEB TAI que realizar. Normalmente, esto se hace analizando el valor de algún parámetro que se envía anexando a la URL de la petición y que se utiliza con esta finalidad. 2) Procesamiento de la petición Determinada la operación a realizar por el Controlador la operación, procede a ejecutar las acciones pertinentes, invocando para ello a los diferentes métodos expuestos por el Modelo. Dependiendo de las acciones a realizar (por ejemplo, un alta de un usuario en el sistema), el Modelo necesitará manejar los datos enviados por el cliente en la petición, datos que le serán proporcionados por el controlador. De la misma manera, los resultados generados por el Modelo (por ejemplo la información resultante de una búsqueda será entregada directamente al controlador). 3) Generación de respuestas Los resultados devueltos por el Modelo al Controlador son depositados por éste en una variable de petición, sesión o aplicación, según el alcance que deban tener. A continuación, el Controlador invoca a la página que debe encargarse de generar la vista correspondiente, está página accederá a la variable de ámbito donde estén depositados los resultados y los utilizará para generar dinámicamente la respuesta HTML que será enviada al cliente. 2. MVP (Modelo-Vista-Presentador) El patrón de arquitectura MVP es una variante de MVC. Se basa en una separación más clara entre la vista y el presentador. El controlador de MVC es sustituido por un componente denominado PRESENTADOR, el cual consta de más complejidad. Este patrón facilita la automatización de las pruebas. El Presentador obtiene los datos del modelo y aplica la lógica de la IU para decidir qué mostrar. Gestiona el estado de la Vista y realiza acciones de acuerdo con la notificación de entrada del usuario desde la Vista. La diferencia fundamental con MVC es que la Vista no sabe del Modelo (sí del Presentador), es decir, no interactúan entre sí de forma directa. Además, existe una relación uno a uno entre el Presentador y la Vista. El Modelo y la Vista mantienen su funcionalidad. La Vista es el punto de entrada a la aplicación. PABLO ARELLANO www.theglobeformacion.com Página 13 B3T8 APLICACIONES WEB TAI 3. MVVM (Modelo-Vista-VistaModelo) El patrón de arquitectura MVVM es una variante de MVC. El controlador de MVC es sustituido por un componente denominado VISTAMODELO. Es una arquitectura impulsada por eventos. MVVM utiliza un enlace de datos bidireccional para la comunicación entre la Vista y el ViewModel. Por otro lado, permite que muchas Vistas estén relacionadas con un modelo de vista. Sin embargo, el ViewModel no tiene referencia a la Vista. La Vista es el punto de entrada a la aplicación. 4. MVW (Modelo-Vista-Whatever) La arquitectura MVW (Modelo-Vista-Whatever) es una variante de MVC. 5. Flux Arquitectura concebida por Facebook en la que el flujo de datos es unidireccional, desde la vista hasta un Store que se encargará de actualizar la vista. Las Vista está formada por componentes IU. Las Acciones contienen la información requerida, son activadas por los componentes de la Vista y se envían al Dispatcher. El Dispatcher se encarga remitir las acciones al Store. El Store maneja los datos de la aplicación, recibiendo la acción solicitada y actualizando el estado; notifica los cambios a la Vista. PABLO ARELLANO www.theglobeformacion.com Página 14 B3T8 APLICACIONES WEB TAI 3. DESARROLLO FRONT-END Y EN SERVIDOR, MULTIPLATAFORMA Y MULTIDISPOSITIVO 1. Front-end El desarrollo de aplicaciones web front-end hace referencia a las tecnologías que interactúan con el cliente, englobadas en el término "del lado del cliente". Su misión es mostrar al usuario la información, recibir sus peticiones y trasladarlas (de alguna manera) al servidor web para ser procesadas y dar una respuesta. Las tecnologías web involucradas en el desarrollo del lado del cliente son, principalmente, HTML, CSS y JavaScript. Todas ellas son interpretadas por el navegador, último elemento que se relaciona con el usuario web. Los desarrollos web implementados pueden ser validados para comprobar su adecuación a los estándares. Entre ellos, tenemos: - HTML: https://validator.w3.org/ - CSS: https://validator.w3.org/unicorn/?ucn_task=full-css&ucn_lang=es Por último, cabe destacar, por su importancia, que los desarrollos webs actuales han de poder ser ejecutados en diferentes plataformas (sistemas operativos) y en diferentes dispositivos (equipos de sobremesa, tablets y móviles), lo que se denomina Responsive Web Design (RWD) o diseño web adaptable. 2. Back-end El desarrollo de aplicaciones web back-end hace referencia a las tecnologías web que se ubican en el servidor web, acuñadas como "del lado del servidor". El objetivo básico es recibir las peticiones del cliente (front-end), procesarlas y elaborar una respuesta dirigida al usuario. El back-end, normalmente, se relaciona con diversas fuentes de datos (SGBD principalmente) para el tratamiento de datos. Las tecnologías web principales del lado del servidor son: servlets, JSP, ASP.NET, Node.js, PHP, Ruby y Python. PABLO ARELLANO www.theglobeformacion.com Página 15 B3T8 APLICACIONES WEB TAI 3. Stacks disponibles Un stack es un conjunto de tecnologías (tanto del lado del cliente como del servidor) usadas para construir aplicaciones web. Destacan los siguientes stacks: - MEAN: Mongo DB, ExpressJS, Angular y NodeJS. - MERN: Mongo DB, ExpressJS, React y NodeJS. - MEVN: Mongo DB, ExpressJS, Vue.js y NodeJS. PABLO ARELLANO www.theglobeformacion.com Página 16 B3T8 APLICACIONES WEB TAI 4. LENGUAJES: HTML, XML Y SUS DERIVACIONES 1. HTML (HyperText Markup Language) Permite definir la ESTRUCTURA de una página web utilizamos HTML. Ver documento B3T8 HTML. 2. XML (eXtensible Markup Language) XML (eXtensible Markup Language) es un lenguaje de marcado que permite describir contenido de forma independiente a su presentación. Estandarizado por el W3C. La última versión es XML 1.1. Deriva del lenguaje SGML (Standard Generalized Markup Language). Las etiquetas XML son case sensitive. Partes de un documento XML: - PRÓLOGO: es opcional y contiene una sentencia que declara el documento como XML, una declaración del tipo de documento y comentarios e instrucciones de procesamiento. DOCUMENTO XML DOCUMENTO XML DOCUMENTO XML standalone indica si el documento va acompañado de un DTD (“no”) o no lo necesita (“yes”). TIPO DOCUMENTO fichero.dtd contiene las reglas (elementos) que se pueden usar en el fichero XML. - CUERPO: es obligatorio, debe contener solo un elemento raíz (imprescindible para que el documento esté bien formado). … Si se utiliza un XML Schema para validar el documento XML en lugar de un DTD, se añadirán al elemento raíz los siguientes atributos:... PABLO ARELLANO www.theglobeformacion.com Página 17 B3T8 APLICACIONES WEB TAI xs:schemaLocation indica la ubicación del fichero XSD. - ELEMENTOS: pueden tener contenido o ser elementos vacíos. contenido 8 - ATRIBUTOS: permiten incorporar propiedades a los elementos de un documento. Deben ir entre comillas dobles. - ENTIDADES PREDEFINIDAS: representan caracteres especiales (por ejemplo, &, , "), de manera que no sean interpretados como elementos de marcado por el procesador XML. < à menor que > à mayor que & à ampensard " à comilla doble ' à comilla simple - Secciones CDATA: permiten especificar datos usando cualquier carácter sin que se interprete como elementos de marcado XML. LISTADO DE APROBADOS ]]> - COMENTARIOS: son ignorados por el procesador XML. PABLO ARELLANO www.theglobeformacion.com Página 18 B3T8 APLICACIONES WEB TAI Ejemplos: XML Pocket Reference Oreilly Robert Eckstein Michel Casablanca Documentos XML bien formados y válidos: - Documento XML BIEN FORMADO (cumplimiento reglas SINTÁCTICAS): aquél que respeta la estructura y sintaxis definidas por la especificación de XML: o Debe comenzar con una declaración XML. o Debe tener un único elemento raíz. o Los elementos deben estar cerrados y correctamente anidados. o Los valores de los atributos deben ir entre comillas. o Los elementos son case sensitive. - Documento XML VÁLIDO (cumplimiento reglas SEMÁNTICAS): documento XML que está bien formado y es conforme a una DTD o XML Schema. Nota: para que un documento XML sea válido primero ha de estar bien formado. Tecnologías para la validación de documentos XML: - DTD (Document Type Definition): describe la estructura y sintaxis de un documento XML, definiendo los tipos de elementos, atributos y entidades permitidas. Puede ubicarse en un fichero externo o estar contenida en el propio XML (opción no recomendable). Determina: o Los ELEMENTOS que pueden formar parte del XML. PABLO ARELLANO www.theglobeformacion.com Página 19 B3T8 APLICACIONES WEB TAI tipo_elemento puede ser #PCDATA (texto), EMPTY. o Los ATRIBUTOS que pueden tener esos elementos. tipo_atributo puede ser CDATA (cualquier valor o un valor permitido de una lista) y modificador puede ser #REQUIRED, ID (valor único en todo el documento), #FIXED (valores fijos). o La GRAMÁTICA, es decir, la relación entre los elementos. Modificadores del número de ocurrencias: § , (la coma indica el orden exacto de los elementos y su aparición). § | (OR, indica opcionalidad, solo se utiliza uno de los elementos de la lista). § ? (el elemento aparece 0 o 1 vez). § + (elemento aparece 1 o varias veces). § * (el elemento aparece 0 o varias veces). Ejemplo: - XML Schemas: es un documento XML que define los elementos y atributos que puede contener un documento XML. A diferencia de los DTD, se basan en sintaxis XML, y son más potentes al permitir definir nuevos tipos de datos, soportar herencia entre tipos de datos y permitir el uso de namespaces (concepto similar a los paquetes de Java). Esta tecnología también se denomina XSD (XML Schema Definition), siendo una recomendación del W3C. o Prólogo: presente en todo XML Schema. o Elemento raíz (xs:schema): presente en todo XML Schema. contenido En el elemento schema, el atributo xmlns:xs="http://www.w3.org/2001/XMLSchema" indica el espacio de nombres al que pertenecen los elementos y los tipos de datos. PABLO ARELLANO www.theglobeformacion.com Página 20 B3T8 APLICACIONES WEB TAI o Elementos simples (xs:element): es aquel que solo puede contener texto, del tipo de dato indicado. tipo_de_dato puede ser, entre otros: xs:string, xs:integer, xs:int, xs:decimal, xs:boolean, xs:date, xs:time, xs:dateTime, Y también algún tipo definido por el usuario. Ejemplo: Elsa 23 o Atributos (xs:attribute): se ha de indicar el tipo de dato. Los atributos pueden ser fixed (fijos), default (valor por defecto), required y optional (si no se indica nada). Ejemplo: 2 o Elementos complejos (xs:complexType): son aquellos que contienen uno o más elementos y/o atributos, y también los elementos vacíos. o Restricciones (xs:restriction): también denominadas facets, permiten definir qué valores de los tipos de datos son válidos, tanto para atributos como para elementos. xs:length à Longitud fija. xs:minLength à Longitud mínima. xs:maxLength à Longitud máxima. xs:pattern à Patrón de caracteres admitidos. xs:enumeration à Lista de valores admitidos. xs:maxInclusive à Valor ≤ que el indicado. xs:maxExclusive à Valor < que el indicado. PABLO ARELLANO www.theglobeformacion.com Página 21 B3T8 APLICACIONES WEB TAI xs:minExclusive à Valor > que el indicado. xs:minInclusive à Valor ≥ que el indicado. xs:totalDigits à Nº máximo de dígitos para un número. xs:fractionDigits à Nº máximo de decimales para un número. xs:simpleType sirve para definir restricciones a un elemento o a un atributo. Ejemplo: se define un elemento llamado "mes" con la restricción de que el valor que tome no pueda ser menor que 1 ni mayor que 12. Ejemplo: se define un elemento llamado "color" con la restricción de que los únicos valores admitidos son "verde", "amarillo" y "rojo". Ejemplo: se define un elemento llamado "letra" con la restricción de que el único valor admitido es una de las letras minúsculas de la "a" a la "z". Ejemplo: se define un elemento llamado "clave" con la restricción de que su valor tiene que ser una cadena de exactamente 12 caracteres. PABLO ARELLANO www.theglobeformacion.com Página 22 B3T8 APLICACIONES WEB TAI o Indicadores: permiten establecer cómo se van a utilizar los elementos en un documento XML. § Indicadores de ORDEN: xs:sequence: especifica el orden en el que obligatoriamente deben aparecer los elementos hijo de un elemento (AND). xs:choice: indica que solo puede aparecer uno de los elementos (OR). xs:all: indica que los elementos pueden aparecer en cualquier orden. Ejemplo: Italia Florencia § Indicadores de OCURRENCIA: minOccurs y maxOccurs permiten establecer, respectivamente, el nº mínimo y máximo de veces que puede aparecer un determinado elemento. El valor por defecto para maxOccurs y minOccurs es 1. Ejemplo: § Indicadores de GRUPO: xs:group sirve para agrupar un conjunto de declaraciones de elementos relacionados. Ejemplo: PABLO ARELLANO www.theglobeformacion.com Página 23 B3T8 APLICACIONES WEB TAI Ejemplo: XML Schema Ejemplo: XML Schema Dado el esquema XSD anterior, tenemos el siguiente ejemplo de XML: PABLO ARELLANO www.theglobeformacion.com Página 24 B3T8 APLICACIONES WEB TAI 1628680368248 1R 261 200 Ejemplo: XML Schema Dado el esquema XSD anterior, tenemos el siguiente ejemplo de XML: nombreFichero.pdf JVBERi0xLjQKJeLjz9MKMy[….].PDF 1R 261 1628680368248 asiscsv_1628680368450 Procesamiento de documentos XML: - DOM (Document Object Model): es una API que permite representar objetos de un documento HTML o XML de forma jerárquica. El parser procesa el documento XML completo y elabora un árbol en memoria del mismo, permitiendo a la aplicación recorrer y modificar el árbol. Inconveniente: consume mucha memoria. - SAX (Simple API for XML): el parser va procesando el documento XML elemento a elemento. Es rápido, pero no permite modificar los datos. PABLO ARELLANO www.theglobeformacion.com Página 25 B3T8 APLICACIONES WEB TAI 3. XSL (eXtensible Stylesheet Language) XSL (eXtensible Stylesheet Language) es un lenguaje que permite definir el formato de un documento XML para su presentación, de manera análoga a lo que ocurre con CSS y HTML. Es un conjunto de estándares del W3C: - XSLT (XSL Transformations): plantillas con una serie de reglas de transformación y formato que se disparan cuando los elementos coinciden con la plantilla. Transforma un documento XML en otro formato (PDF, HTML...). - XPath (XML Path Language): lenguaje que permite construir expresiones para recorrer y procesar un documento XML. - XSL-FO (XSL Formatting Objects): es un documento XML que especifica cómo formatear unos datos para su presentación. - XQuery: lenguaje de consulta que permite acceder a los datos contenidos en un documento XML. - XLink: lenguaje que permite crear elementos XML que describen relaciones cruzadas entre documentos, imágenes y archivos. - XPointer: lenguaje que permite identificar de forma única fragmentos de un documento XML. Está construido sobre XPath. 4. Lenguajes basados en XML La sindicación web o sindicación de contenidos es el reenvío de contenidos desde una fuente original (sitio web origen) a un sitio web de destino, habitualmente codificados en XML. Lenguajes: - RSS (Really Simple Syndication): formato XML para distribuir contenido en la web. - RDF (Resource Description Framework): es un modelo estándar para intercambio de datos en la web, siendo una de las tecnologías esenciales de la web semántica. El modelo de datos RDF se basa en hacer declaraciones sobre los recursos en forma de expresiones sujeto-predicado-objeto (tripleta RDF). Otros lenguajes basados en XML, relacionados con información financiera: - XBRL (eXtensible Business Reporting Language): formato estándar basado en XML para intercambio de información contable, financiera y tributaria. PABLO ARELLANO www.theglobeformacion.com Página 26 B3T8 APLICACIONES WEB TAI 4. XOP (XML-binary Optimized Packaging) XML-binary Optimized Packaging (XOP) es un estándar del W3C que permite serializar de manera más eficiente los conjuntos de información XML (infosets XML) que tienen ciertos tipos de contenido. Los siguientes términos se utilizan en esta especificación: - Orginal XML Infoset: un conjunto de información XML que se debe optimizar. - Optimized Content: contenido que se ha eliminado del conjunto de información XML. - XOP Infoset: Original Infoset + Optimized Content reemplazado por elementos de información xop:Include. - XOP Document: una serialización del conjunto de información XOP utilizando cualquier versión de XML. - XOP Package: un paquete que contiene el documento XOP y cualquier contenido optimizado. - Reconstituted XML Infoset: un conjunto de información XML que se ha construido a partir de las partes de un paquete XOP. MTOM es normalmente usado con XOP. 5. CSS Para definir la APARIENCIA de una página web utilizamos CSS. Ver documento B3T8 CSS. 6. Web semántica La Web Semántica (también conocida como Web 3.0) es una Web de Datos: de fechas, títulos, números de pieza, propiedades químicas y cualquier otro dato que nos podamos imaginar. La colección de tecnologías de la Web Semántica (RDF, OWL, SKOS, SPARQL, etc.) proporciona un entorno donde la aplicación puede consultar esos datos, hacer inferencias utilizando vocabularios, etc. Sin embargo, para hacer realidad la Web de datos, es importante tener la enorme cantidad de datos disponibles en la Web en un formato estándar, accesible y manejable por las herramientas de la Web Semántica. Además, la Web Semántica no solo necesita acceso a los datos, sino que las relaciones entre los datos también deben estar disponibles para crear una Web de Datos (en lugar de una mera colección de conjuntos de datos). Esta colección de conjuntos de datos interrelacionados en la Web también puede denominarse Datos vinculados. PABLO ARELLANO www.theglobeformacion.com Página 27 B3T8 APLICACIONES WEB TAI La Web Semántica se apoya en tres conceptos fundamentales: - La SEMÁNTICA: significado de los términos. - Los METADATOS: datos que describen otros datos. - Las ONTOLOGÍAS: jerarquía de conceptos y sus relaciones. Tecnologías (estandarizadas por el W3C): - RDF (Resource Description Framework): ya comentado en apartado anterior. - OWL (Web Ontology Language): pensado para ser usado cuando la información contenida en los documentos necesita ser procesada por las aplicaciones, al contrario que en las situaciones donde el contenido sólo necesita ser presentado a los humanos. OWL puede ser usado para representar explícitamente el significado de términos en vocabularios y las relaciones entre esos términos. Esta representación de términos y sus interrelaciones se denomina ontología. - SPARQL (SPARQL Protocol And RDF Query Language): es un lenguaje de consulta de grafos RDF, es decir, un lenguaje de consulta semántica de bases de datos. - SKOS (Simple Knowledge Organization System): aplicación de RDF que proporciona un modelo para representar la estructura básica y el contenido de esquemas conceptuales como listas encabezamientos de materia, taxonomías, esquemas de clasificación, tesauros (lista de palabras para representar conceptos) y cualquier tipo de vocabulario controlado. PABLO ARELLANO www.theglobeformacion.com Página 28 B3T8 APLICACIONES WEB TAI 5. NAVEGADORES Y LENGUAJES DE PROGRAMACIÓN WEB 1. Navegadores web Un navegador web es un programa informático que permite consultar y visualiza páginas web. El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar. Es de vital importancia conocer los distintos navegadores con los que los usuarios van a utilizar nuestras páginas. En teoría, los estándares web publicados por el W3C deberían permitir que las páginas fueran visualizadas exactamente igual en todos los navegadores. La realidad, sin embargo, es distinta. Cada navegador posee diferencias que pueden hacer necesario el uso de técnicas "especiales" para que una web se muestre de la misma forma en todos los navegadores. La comunicación entre servidor web y navegador web se realiza a través del protocolo HTTP, aunque cualquier navegador soporta otros protocolos como HTTPS o FTP. Podemos observar un esquema de funcionamiento básico del navegador: Componentes principales de un navegador web: - Interfaz de usuario: parte visual que interactúa con el usuario. Es la ventana/pestaña del navegador. - Motor de renderizado: dibuja el contenido en una ventana/pestaña del navegador, que es mostrada al usuario. Esto es, el contenido HTML de una página junto con las CSS son interpretadas por el navegador para generar el contenido visual que ofrecerá al usuario. Destacamos los motores Blink, Webkit, Gecko y Trident. PABLO ARELLANO www.theglobeformacion.com Página 29 B3T8 APLICACIONES WEB TAI - Intérprete JavaScript: interpreta y ejecuta el código escrito en el lenguaje de programación JavaScript. Entre los intérpretes más conocidos citamos a V8, JavaScriptCore y SpiderMonkey. Los dos últimos componentes determinan el rendimiento de un navegador respecto a la velocidad de carga de una página web. A continuación, relacionamos los navegadores web más relevantes: (1) Google Chrome: navegador multiplataforma derivado de Chromium. Motor de renderizado: Blink. Intérprete de JavaScript: V8. (2) Safari: navegador para dispositivos Apple. Motor de renderizado: Webkit. Intérprete de JavaScript: JavaScriptCore. (3) Mozilla Firefox: navegador de código abierto y multiplataforma. Motor de renderizado: Gecko. Intérprete de JavaScript: SpiderMonkey. (4) Microsoft Edge: navegador derivado de Chromium para Windows, sistemas Apple y Android. Motor de renderizado: Blink. Intérprete de JavaScript: V8. (5) Internet Explorer: navegador para Windows. Obsoleto a favor de Microsoft Edge. Motor de renderizado: Trident. Intérprete de JavaScript: Chakra. (6) Opera: navegador multiplataforma. Motor de renderizado: Blink. Intérprete de JavaScript: V8. (7) Chromium: navegador de código abierto. (8) Lynx: navegador basado en texto bajo licencia GNU GPL. Se integra con lectores de pantalla destinado a usuarios con problemas visuales. Utilizado para pruebas de usabilidad de webs en navegadores antiguos. PABLO ARELLANO www.theglobeformacion.com Página 30 B3T8 APLICACIONES WEB TAI Estadísticas de uso de navegadores web a nivel mundial en julio de 2022: Herramientas de comprobación del cumplimiento de los estándares para navegadores web: - acid3: test dirigido a pruebas de DOM y ECMAScript consistente en 100 pruebas encuadradas en 6 grupos (http://acid3.acidtests.org/). La puntuación máxima que se puede obtener es 100. - html5test: evaluación del estándar HTML5 (https://html5test.com). La puntuación máxima que se puede obtener es de 555 puntos. 2. Lenguajes de programación web De entre los lenguajes de programación web o lenguajes del lado del servidor, destacan: - PHP: ver documento B3T8 PHP. - Python: ver documento B3T8 Python. - Ruby: ver documento B3T8 Ruby. - Servlet y JSP: ver documento B3T6 Jakarta.NET. - ASP.NET: ver documento B3T6 Jakarta.NET. PABLO ARELLANO www.theglobeformacion.com Página 31 B3T8 APLICACIONES WEB TAI 6. LENGUAJES DE SCRIPT Los lenguajes de script definen el COMPORTAMIENTO de una página web, destacando JavaScript. Ver documento B3T8 JavaScript. PABLO ARELLANO www.theglobeformacion.com Página 32

Aplicaciones Web - Past Paper PDF 2015-2016

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue