UF1842 Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión

UF1842

Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guion

Datos del autor

José Ramón Santos Dios es diplomado en Ciencias Empresariales por la Universidad de Vigo, graduado superior en TIC por la Universidad de Santiago de Compostela y máster en Software Libre por la UOC. Desde el año 2003 se ha dedicado a la docencia, impartiendo acciones formativas relacionadas con las Tecnologías de la Información y las Comunicaciones en las principales empresas de formación de la comunidad autónoma de Galicia y como Agente TIC para la red CEMIT de la Xunta de Galicia.

En la actualidad, combina su profesión de docente con la elaboración de contenidos didácticos adaptados a diferentes niveles formativos y la elaboración de manuales relacionados con certificados de profesionalidad, también el desarrollo del diseño y programación web ocupan parte de su actividad profesional.

Para ver su currículum profesional completo puede acceder a el enlace de la red Linkedin: https://www.linkedin.com/in/santosdios/

Ficha Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guion. Informática y comunicaciones.

1ª Edición Certia Editorial, Pontevedra, 2022 Autor: José Ramón Santos Dios Formato: 170 x 240 mm

Desarrollo

• 258 páginas.

y reutilización de componentes software y multimedia

mediante lenguajes de guion. Informática y comunicaciones.

No está permitida la reproducción total o parcial de este libro, ni su tratamiento informático, ni la transmisión de ninguna forma o por cualquier medio, ya sea electrónico, mecánico, por fotocopia, por registro u otros métodos, sin el permiso previo y por escrito de los titulares del Copyright.

Derechos reservados 2022, respecto a la primera edición en español, por Certia Editorial.

ISBN: 978-84-17328-61-0 Editor: Cenepo Consult, SLU Depósito legal: PO 203-2022 Impreso en España - Printed in Spain Certia Editorial ha incorporado en la elaboración de este material didáctico citas y referencias de obras divulgadas y ha cumplido todos los requisitos establecidos por la Ley de Propiedad Intelectual. Por los posibles errores y omisiones, se excusa previamente y está dispuesta a introducir las correcciones pertinentes en próximas ediciones y reimpresiones.

Fuente fotografia portada: Pixabay, autoriza a copiar, distribuir, comunicar publicamente la obra y adaptar el trabajo.

510

MF0493_3: Implantación de aplicaciones web en entorno internet, intranet y extranet MP0391: Módulo de prácticas profesionales no laborales Duración horas totales certificado de profesionalidad

MF0492_3: Programación web en el entorno servidor

240

90

MF0491_3: Programación web en el entorno cliente

510

80 590

Duración horas módulos formativos

90

60

90

90

30

90

60

Horas

90

240

180

UF1841: Elaboración de documentos web mediante lenguajes de marca UF1842: Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión UF1843: Aplicaciones técnicas de usabilidad y accesibilidad en el entorno cliente UF1844: Desarrollo de aplicaciones web en el entorno servidor.

UF1845: Acceso a datos en aplicaciones web del entorno servidor.

UF1846: Desarrollo de aplicaciones web distribuidas.

Correspondencia con el Catálogo Modular de Formación Profesional Módulos certificado H.CP Unidades formativas

180

H. Q

FICHA DE CERTIFICADO DE PROFESIONALIDAD (IFCD0210) DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB (RD 1531/2011, de 31 de octubre modificado por el RD 628/2013, de 2 de agosto)

Área profesional: Desarrollo

Familia profesional: INFORMÁTICA Y COMUNICACIONES

Índice INTRODUCCIÓN.................................................................................. 15

Unidad didáctica 1 1. Arquitecturas de aplicaciones web....................................................... 19 1.1. Esquema general...........................................................................................21 1.2. Arquitectura en capas...................................................................................22 1.3. Interacción entre las capas cliente y servidor...........................................23 1.4. Arquitectura de la capa cliente....................................................................23

UNIDAD DIDÁCTICA 2 2. Navegadores web................................................................................. 25 2.1. Arquitectura de un navegador.....................................................................27 2.1.1. Interfaz de usuario..........................................................................27 2.1.2. Motor de exploración.....................................................................28 2.1.3. Motor de presentación...................................................................28 2.1.4. Módulos auxiliares: persistencia, interfaz de red, intérprete de scripts, infraestructura de presentación.......................................29

9

2.2. Navegadores de uso común. Comparativa................................................31 2.3. Seguridad en navegadores............................................................................32 2.4. Integración de aplicaciones en navegadores. Adaptadores (plugins)......33 2.4.1. Adaptadores comunes en diferentes navegadores.....................34 2.4.2. Configuración de tipos de ficheros y adaptadores.....................34 2.5. Conformidad a estándares...........................................................................37

UNIDAD DIDÁCTICA 3 3. Creación de contenidos web dinámico.............................................. 39 3.1. Fundamentos de programación............................................................... 41 3.1.1. Constantes, variables. Tipos de datos simples y estructurados................................................................................ 41 3.1.2. Expresiones y sentencias. Operadores básicos........................ 42 3.1. 3. Control de flujo: secuencial, bucles y condicionales............... 44 3.1.4. Subprogramas: procedimientos y funciones. Librerías.......... 46 3.1.5. Tipos de parámetros.................................................................... 47 3.1.6. Llamadas a funciones. Recursividad.......................................... 48 3.1.7. Nociones de orientación a objetos: clases y objetos.

Herencia........................................................................................ 51 3.1.8. Principales metodologías de programación............................. 52 3.2. Lenguajes para el desarrollo de contenido dinámico............................ 53 3.2.1. Lenguajes de guion. Características generales......................... 53

10

3.2.2. Comparativa de lenguajes de guion. Criterios para la selección de un lenguaje de guion............................................................... 54 3.2.3. Máquinas virtuales en navegadores. Miniaplicaciones (applets)........................................................................................... 55 3.2.4. Otros lenguajes para el desarrollo de aplicaciones web enriquecidas (RIA)....................................................................... 56

Unidad didáctica 4 4. Lenguajes de guion de uso general................................................... 57 4.1. Integración de lenguajes de guion en navegadores web...................... 59 4.1.1. Comparativa y compatibilidad con navegadores..................... 60 4.1.2. Diferencias entre versiones......................................................... 61 4.2. Estructura general de un programa en un lenguaje de guion............. 62 4.2.1. Variables y tipos de datos............................................................ 62 4.2.2. Operadores.................................................................................... 64 4.2.3. Sentencias. Anidamiento............................................................. 69 4.2.4. Estructuras de control y condicionales..................................... 71 4.2.5. Bucles............................................................................................. 71 4.2.6. Comentarios.................................................................................. 73 4.3. Funciones.................................................................................................... 74 4.3.1. Parámetros.................................................................................... 75 4.3.2. Variables locales y globales......................................................... 77

11

4.3.3. Bibliotecas de funciones............................................................. 78 4.4. Manipulación de texto............................................................................... 82 4.4.1. Funciones básicas para la manipulación de texto................... 82 4.4.2. Introducción y validación de texto............................................ 85 4.5. Listas (arrays).............................................................................................. 95 4.5.1. Creación de arrays básicos.......................................................... 96 4.5.2. Arrays multidimensionales.......................................................... 99 4.5.3. Tratamiento de arrays mediante bucles.................................... 100 4.6. Formatos estándar de almacenamiento de datos en lenguajes de guion............................................................................................................ 105 4.6.1. Comparativa.................................................................................. 105 4.6.2. Tratamiento de formatos estándar............................................ 106 4.6.3. Diccionarios de datos.................................................................. 108 4.7. Objetos........................................................................................................ 109 4.7.1. Creación de objetos: métodos y estructuras de datos............ 109 4.7.2. Bibliotecas de objetos.................................................................. 112 4.8. El modelo de documento web................................................................. 115 4.8.1. Estructura de documento........................................................... 115 4.8.2. Navegación por las propiedades de un documento............... 117 4.8.3. Cambio de propiedades mediante lenguajes de guion........... 123 4.9. Gestión de eventos.................................................................................... 126 4.9.1. Tipos de eventos.......................................................................... 127

12

4.9.2. Técnicas para el manejo de eventos mediante lenguajes de guion.............................................................................................. 129 4.9.3. Manejadores de eventos.............................................................. 130 4.9.4. Eventos de carga inicial............................................................... 135 4.9.5. Delegación y propagación de eventos...................................... 137 4.10. Gestión de errores..................................................................................... 139 4.10.1. Manejo de error «No lenguajes de guion habilitados» (no script)............................................................................................. 139 4.10.2. Chequeo de errores en funciones.............................................. 140 4.10.3. Captura de errores....................................................................... 142 4.10.4. Uso de puntos de ruptura........................................................... 144 4.11. Usos específicos de lenguajes de guion.................................................. 146 4.11.1. Integración multimedia mediante lenguajes de guion............ 146 4.11.2. Animaciones................................................................................. 147 4.11.3. Efectos especiales en elementos gráficos y texto.................... 147 4.11.4. Rejillas de datos............................................................................ 155 4.11.5. Manejo de canales de suscripción (RSS)................................... 155 4.11.6. Descripción de las técnicas de acceso asíncrono (AJAX)...... 160 4.11.7. Uso de lenguajes de guion en dispositivos móviles................ 163 4.12. Entornos integrados (Frameworks) para el desarrollo con lenguajes de guion............................................................................................................ 165 4.12.1. Características de los entornos de uso común.

Comparativa.................................................................................. 165 4.12.2. Editores avanzados...................................................................... 167

13

4.12.3. Funcionalidades de validación y depuración de código......... 168 4.12.4. Técnicas para la documentación del código............................ 173 4.12.5. Utilidades adicionales para la realización de contenidos dinámicos...................................................................................... 176 4.12.6. Extensiones útiles de navegadores............................................ 177 4.12.7. Entornos de desarrollo específicos: desarrollo sobre dispositivos móviles..................................................................... 178

UNIDAD DIDÁCTICA 5 5. Contenidos multimedia..................................................................... 181 5.1. Definición de multimedia. Tipos de recursos multimedia................... 183 5.2. Inclusión de contenido multimedia en páginas web............................. 184 5.2.1. Adaptadores para recursos multimedia.................................... 184 5.2.2. Enlace a diferentes recursos desde páginas web. Incrustación de contenido multimedia............................................................ 185 5.2.3. Formatos de fichero web. El estándar MIME......................... 185 5.2.4. Tipos de reproducción. Streaming y carga progresiva............. 185 5.2.5. Comparativa del tratamiento de contenido multimedia en diferentes versiones .................................................................... 186 5.3. Gráficos multimedia.................................................................................. 187 5.3.1. Formatos gráficos. Comparativa................................................ 188 5.3.2. Repositorios de imágenes........................................................... 188

14

5.3.3. Tipos de gráficos: fotografías, imágenes vectorizadas e iconos............................................................................................. 189 5.3.4. Herramientas para el tratamiento gráfico. Filtros y tratamiento de imágenes................................................................................... 190 5.3.5. Conversión de formatos gráficos.............................................. 200 5.4. Audio............................................................................................................ 201 5.4.1. Formatos de audio. Comparativa............................................... 201 5.4.2. Reproductores de audio. Inserción en navegadores web....... 202 5.4.3. Enlace o inserción de canales de audio.................................... 202 5.4.4. Conversión de formatos de audio............................................. 204 5.4.5. Herramientas para el tratamiento de sonido. Edición de fragmentos de audio.................................................................... 204 5.5. Vídeo............................................................................................................ 205 5.5.1. Formatos de vídeo. Calidad de vídeo y comparativa.............. 205 5.5.2. Repositorios de vídeo.................................................................. 206 5.5.3. Reproductores de vídeo. Inserción en navegadores web....... 207 5.5.4. Enlace o inserción de canales de vídeo.................................... 209 5.5.5. Conversión de formatos de vídeo. Optimización................... 212 5.5.6. Herramientas de edición de vídeo. Creación de efectos y composición.................................................................................. 213 5.6. Animaciones multimedia........................................................................... 214 5.6.1. Principios de la animación.......................................................... 214 5.6.2. Herramientas para la creación de animaciones....................... 215

15

5.6.3. Formatos de animaciones........................................................... 216 5.6.4. Inclusión en páginas web............................................................ 217 5.6.5. Buenas prácticas en el uso de animaciones.............................. 217 5.7. Elementos interactivos.............................................................................. 218 5.7.1. Creación de elementos interactivos........................................... 219 5.7.2. Mapas Interactivos....................................................................... 221 5.7.3. Ámbitos de uso............................................................................ 223

resumen final............................................................................... 225

actividades..................................................................................... 227

autoEVALUACIÓN FINAL.............................................................. 231

soluciones...................................................................................... 237

BIBLIOGRAFÍA .................................................................................. 253

16

Introducción El manual «UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guion» forma parte del módulo formativo «MF0491_3: Programación web en el entorno cliente», del Catálogo Nacional de Cualificaciones Profesionales, y pertenece al certificado de profesionalidad «IFCD0210: Desarrollo de aplicaciones con tecnologías web».

El manual tiene por objetivo aprender los fundamentos de los principales lenguajes de guion utilizados para desarrollar scripts en lado del cliente y dotar de interactividad dinámica a una página web. A lo largo de los capítulos del presente manual trataremos de identificar las estructuras de programación y los tipos de datos que utilizan este tipo de lenguajes, así como diferenciar las propiedades y métodos de los objetos que se utilizan en la elaboración de scripts con lenguajes de guion. Además, trataremos de identificar scripts ya desarrollados que se adapten a necesidades especificadas adaptando sus funcionalidades a estas e integrándolas en las páginas web.

Por último, describiremos la sintaxis y los elementos básicos de JavaScript, el lenguaje de guion más utilizado actualmente por los desarrolladores, y su interacción con la web.

Finalmente, encontraremos diferentes actividades y pruebas de evaluación para poner en práctica los contenidos aprendidos.

Este manual te permitirá adquirir las siguientes capacidades y criterios de evaluación: •

C1: Crear componentes software mediante herramientas y lenguajes de guion utilizando técnicas de desarrollo estructurado. o

CE1.1 En un supuesto práctico, en el que se pide crear y mantener componentes software en el entorno del cliente mediante herramientas de desarrollo y lenguajes de guion disponiendo de documentación de diseño detallado: –

Crear y archivar componentes software.

UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión

17

•

18

–

Modificar y eliminar componentes software.

–

Depurar y verificar los componentes software elaborados.

o

CE1.2 Relacionar la funcionalidad del componente software a desarrollar con las técnicas de desarrollo estructurado estándares para cumplir la funcionalidad del componente software.

o

CE1.3 Formular estructuras de datos y flujo de control mediante lenguajes de guión según la funcionalidad del componente software a desarrollar.

o

CE1.4 Crear procedimientos y funciones adecuados a la funcionalidad del componente software a desarrollar utilizando lenguajes de guión.

o

CE1.5 Documentar el componente software desarrollado según especificaciones de diseño.

C2: Crear y manipular componentes multimedia utilizando lenguajes de guión y herramientas específicas. o

CE2.1 Identificar los formatos estándares de distribución y utilización de los componentes multimedia, audio, vídeo, ilustraciones, fotografías, entre otros para su integración en documentos del entorno cliente.

o

CE2.2 Desarrollar animaciones e interactividades en componentes multimedia mediante lenguajes de guión específicos según especificaciones dadas.

o

CE2.3 Crear o manipular componentes multimedia mediante herramientas específicas para adecuar los contenidos a los formatos indicados en las especificaciones recibidas.

o

CE2.4 En un supuesto práctico en el que se cuenta con un documento web, componentes multimedia y especificaciones de diseño del producto final: –

Analizar los formatos de los componentes multimedia originales.

–

Realizar los ajustes en los formatos de los componentes multimedia para alcanzar los parámetros de rendimientos requeridos en las especificaciones.

–

Desarrollar los procesos de interactividad definidos en las especificaciones.

–

Integrara los componentes multimedia en el documento del entorno

UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guion

cliente.

– •

Verificar la integración y funcionalidad de los componentes según las especificaciones de diseño.

C3: Seleccionar componentes de software ya desarrollados según su funcionalidad para integrarlos en documentos. o

CE3.1 Analizar los requisitos de uso de componentes software para ser utilizados por el documento en el entorno del cliente.

o

CE3.2 Insertar componentes software de aplicación de cliente que serán usados por el documento en el entorno del cliente.

o

CE3.3 En supuestos prácticos, en el que se pide seleccionar componentes de software ya desarrollados para integrarlos en documentos herramientas de desarrollo y lenguajes de guión partiendo de documentación de diseño detallado: –

Integrar componentes de software orientados a técnicas de gestión de ficheros en el servidor.

–

Integrar componentes de software que permitan la gestión de errores.

–

Integrar componentes de software para almacenar información de tipo diccionario.

–

Integrar componentes de software para controlar y validar la información introducida por el usuario.

–

Integrar componentes de software para visualizar información referente al sistema de ficheros en el servidor.

–

Integrar componentes de software para permitir efectos dinámicos relacionados con el documento o dispositivo utilizado.

–

Integrar componentes de software para utilizar otras funcionalidades en el documento desarrollado.

–

Verificar que las funcionalidades provistas por el componente coinciden con las esperadas y que no se producen conflictos con el resto de los componentes del sistema.

UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guion

19

UNIDAD

1

Arquitecturas de aplicaciones web

Contenido 1.1. Esquema general 1.2. Arquitectura en capas 1.3. Interacción entre las capas cliente y servidor 1.4. Arquitectura de la capa cliente

UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión

21

Las aplicaciones web consisten en una clase de programas que son soportadas por navegadores web y ejecutadas en estos y en los servidores que las alojan, utilizando las páginas web como interfaz de usuario. Se trata, por lo tanto, de un conjunto complejo de diferentes sistemas integrados entre sí, utilizando los lenguajes de marcado y hojas de estilo para su interface, así como los lenguajes de script del lado del cliente y el servidor para ejecutar las instrucciones necesarias para su funcionamiento.

Las aplicaciones web han cobrado gran protagonismo en la actualidad gracias a la propagación de Internet y a las mejoras de ancho de banda en las infraestructuras que lo soportan. Sus ventajas frente a las aplicaciones tradicionales de sobremesa residen en su carácter multiplataforma, en no ser necesaria una instalación previa para su utilización, en que los datos de usuario se guardan en un servidor de la misma forma que todos los datos de la aplicación, que permiten interactuar con otros usuarios de la aplicación, y que pueden llegar a manejar enormes cantidades de datos alojados en los servidores que las soportan.

Como sistemas complejos que son, las aplicaciones web necesitan de una metodología y planificación previapara la creación de una arquitectura robusta y flexible que permita una mejora progresiva, el trabajo en equipo de los desarrolladores, y un proyecto sostenible a lo largo del tiempo.

Podemos definir la arquitectura web como la ciencia que estudia cómo organizar, estructurar y clasificar el contenido y los sistemas de búsqueda y recuperación de información de las aplicaciones web.

1

.1. Esquema general

La arquitectura de las aplicaciones web sigue el modelo cliente-servidor, mediante el cual los sitios web se encuentran alojados en los servidores y los clientes (agentes de usuario o navegadores) solicitan las páginas web al servidor que se las envía preprocesadas. Estas instrucciones de petición y respuesta se UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión

23

envían mediante cabeceras http que contienen los parámetros del intercambio de información entre ambos; por lo tanto, debemos separar la lógica del cliente y del servidor, así como el conjunto de tecnologías que pertenece a cada uno.

1

.2. Arquitectura en capas

El modelo cliente-servidor, también llamado arquitectura de dos capas, ha evolucionado hasta la arquitectura de tres capas, donde además de la capa de interface o presentación, encargada de mostrar los datos de manera adecuada, y la capa de negocio o aplicaciones, que se encarga de la ejecución de los scripts de programación, nos encontramos con la tercera capa llamada capa de datos, que gestiona todo lo que tienen que ver con el acceso a las bases de datos de la aplicación.

Un ejemplo de modelo de tres capas es el MVC, Modelo Vista Controlador, muy extendido en la elaboración de arquitecturas de aplicaciones web. El MVC determina tres aspectos de la aplicación: la Vista, que es donde corre la interfaz

24

UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guion

de usuario, el Controlador, que es donde se ejecuta la aplicación y los datos.

1

.3. Interacción entre las capas cliente y servidor

Como hemos comentado antes, este tipo de modelo funciona mediante las peticiones de un cliente a su servidor el cual le devuelve una respuesta. Se trata, por lo tanto, de un modelo de aplicación distribuida en la cual la separación entre cliente y servidor es de tipo lógica, es decir, el servidor o cliente no tienen por qué ser una sola máquina o un solo programa

1

.4. Arquitectura de la capa cliente

El tipo de cliente más utilizado en las aplicaciones web es el navegador web, tiene la ventaja de que suele estar instalado en cualquier computadora y no necesitamos instalar ningún software específico para acceder a la aplicación. Por lo tanto, las páginas web constituyen el principal componente de la aplicación web en su capa de cliente. Estas páginas, además de contener el lenguaje de marcado y hojas de estilo necesarios para presentar su interfaz de usuario, pueden contener lenguajes de scripts dinámicos con el objetivo de aligerar el trabajo de procesamiento del servidor, el cual suele ser más lento que en la parte UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guion

25

del cliente debido a la necesidad de envío-recepción de datos para el mismo.

Para utilizar de la manera más eficiente posible el uso de estos scripts de cliente, debemos conocer lo mejor posible el navegador donde se ejecutarán, y las posibilidades de interacción con los mismos que nos ofrece.

26

UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guion

UNIDAD

2

Navegadores web

Contenido 2.1. Arquitectura de un navegador 2.2. Navegadores de uso común. Comparativa 2.3. Seguridad en navegadores 2.4. Integración de aplicaciones en navegadores. Adaptadores (plugins) 2.5. Conformidad a estándares

UF1842. Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión

27