Introducción a Java y JavaScript

Introducción a Java y JavaScript

Java es un lenguaje de programación orientado a objetos, que se utiliza para desarrollar aplicaciones robustas, mientras que JavaScript es un lenguaje de programación interpretado, que se utiliza para agregar interactividad y dinamismo a las páginas web. En esta Lección reconocerás el papel y la importancia de ambos lenguajes en el desarrollo web moderno.

1. Origen

Introducción a Java y JavaScript

Java y JavaScript son dos lenguajes de programación que surgieron en la década de 1990 con propósitos distintos, pero igualmente importantes. Lee los detalles del origen de cada lenguaje y seguidamente pulsa los botones para mayor información.

JavaScript

Fue creado por Brendan Eich en 1995 mientras trabajaba en Netscape Communications Corporation (ahora Mozilla Corporation), como un lenguaje de scripting para mejorar la interactividad en páginas web estáticas. Fue diseñado para ser ejecutado en el navegador web del usuario y permitir la manipulación dinámica de elementos HTML, la validación de formularios y la interacción con el usuario.

Java

Desarrollado por Sun Microsystems en la década de 1990. Fue creado por un equipo de ingenieros liderado por James Gosling, con el objetivo de desarrollar un lenguaje de programación que pudiera ser utilizado para escribir software que funcionara en diferentes plataformas, independientemente del sistema operativo o la arquitectura de hardware subyacente.

1 - 10

2. Semántica - Java

Introducción a Java y JavaScript

Java es un lenguaje de programación de propósito general, que se caracteriza por su portabilidad y su enfoque en la orientación a objetos. Algunos puntos clave sobre la semántica de Java son:

Encapsulación

Java fomenta la encapsulación, lo que implica ocultar los detalles internos de una clase y proporcionar una interfaz pública para interactuar con ella.

Clases y objetos

Java se basa en la programación orientada a objetos, lo que significa que se utilizan clases y objetos como componentes fundamentales.

Herencia

Java permite la herencia, lo que significa que una clase puede heredar propiedades y métodos de otra clase.

Polimorfismo

Java admite polimorfismo, lo que significa que una clase puede tener múltiples formas.

Pulsa los botones para conocer más sobre la semántica de Java

2 - 10

3. Semántica - JavaScript

Introducción a Java y JavaScript

JavaScript es un lenguaje de programación de alto nivel, interpretado y orientado a objetos. Su semántica se diferencia de Java en varios aspectos:

Prototipado

Modelo basado en prototipos en lugar de clases

Funciones de primera clase

Las funciones son ciudadanos de primera clase

Manipulación del DOM

Interacción con el Modelo de Objetos del Documento (DOM)

Pulsa los botones para conocer más sobre la semántica de JavaScript

3 - 10

4. Principios básicos del uso de multimedia

Introducción a Java y JavaScript

Java y JavaScript ofrecen diferentes enfoques para el uso de multimedia en aplicaciones web.

Figura 2. Unofficial JavaScript logo by Chris Williams. [Logotipo], (Wikimedia Commons, 2011).

Por otro lado, JavaScript, siendo un lenguaje interpretado en el navegador, ofrece enfoques más orientados a la interactividad y manipulación dinámica de elementos multimedia en una página web. A través de elementos HTML específicos como <audio>, <img> y <video>, JavaScript permite la reproducción y manipulación de contenido multimedia de manera sencilla.

Java, al ser un lenguaje de programación de propósito general, ofrece una amplia gama de APIs y bibliotecas para trabajar con multimedia. Estas APIs brindan a los desarrolladores un mayor control sobre el flujo de audio, la mezcla de pistas, la aplicación de efectos de sonido y la manipulación avanzada de imágenes.

Pulsa los botones para conocer más sobre los principios básicos del uso multimedia

4 - 10

5. Java vs JavaScript

Introducción a Java y JavaScript

La diferencia fundamental radica en que Java es un lenguaje de programación más completo y orientado a objetos, con bibliotecas especializadas para el procesamiento de multimedia, mientras que JavaScript es un lenguaje de programación más ligero y orientado a eventos, que se integra directamente con el HTML y brinda opciones para la manipulación interactiva de multimedia dentro de una página web.

5 - 10

6. Uso de multimedia en tecnologías web

Introducción a Java y JavaScript

El uso de imágenes, audio y video en tecnologías web es importante, porque mejora la experiencia del usuario, facilita la comunicación efectiva, permite la interacción, ayuda en el marketing y la promoción, y añade entretenimiento y creatividad. Estos elementos multimedia pueden transformar una aplicación web en algo visualmente atractivo, informativo, interactivo y agradable para los usuarios.

Video

Imágenes

Audio

Pulsa los botones para conocer más sobre el uso multimedia en tecnologías web

6 - 10

7. Bibliotecas para uso multimedia en Java

Introducción a Java y JavaScript

Existen diversas bibliotecas especializadas en Java que brindan herramientas para la reproducción de audio, video y el procesamiento de imágenes. Estas bibliotecas ofrecen funcionalidades avanzadas que permiten manipular y transformar estos tipos de contenido de manera eficiente y efectiva.

Bibliotecas de reproducción de audio Java Sound API

Bibliotecas de procesamiento de imágenes Java 2D API

Bibliotecas de reproducción de video Java Media Framework (JMF)

Pulsa los botones para conocer más sobre bibliotecas para uso multimedia en Java

7 - 10

8. Uso multimedia en JavaScript

Introducción a Java y JavaScript

JavaScript ofrece un conjunto de APIs y características incorporadas, que facilitan el uso de multimedia en aplicaciones web.

Elementos multimedia HTML

APIs adicionales

Pulsa en los botones para conocer algunos aspectos importantes sobre el uso multimedia en JavaScript.

8 - 10

9. Ejemplos de uso multimedia

Introducción a Java y JavaScript

Observa aquí los ejemplos de uso multimedia y seguidamente pulsa los botones para revisar la descripción de estos.

Java

JavaScript

<!DOCTYPE html> <html> <head> <title>Reproductor de Audio</title> <style> audio { display: block; margin-bottom: 10px; } </style> </head> <body> <h1>Reproductor de Audio</h1> <audio id="audioPlayer" controls> <source src="audio.mp3" type="audio/mpeg"> </audio>

<button onclick="playAudio()">Play</button> <button onclick="pauseAudio()">Pause</button> <script> var audioPlayer = document.getElementById("audioPlayer"); function playAudio() { audioPlayer.play(); } function pauseAudio() { audioPlayer.pause(); } </script> </body> </html>

clip.start(); Thread.sleep(3000); // Espera 3 segundos antes de detener la reproducción clip.stop(); clip.close(); audioInputStream.close(); } catch (Exception e) { e.printStackTrace(); } }

import javax.sound.sampled.*; public class AudioPlayer { public static void main(String[] args) { try { AudioInputStream audioInputStream = AudioSystem.getAudioInputStream(AudioPlayer.class.getResourceAsStream("audio.wav")); Clip clip = AudioSystem.getClip(); clip.open(audioInputStream);

9 - 10

10. Conclusiones

Introducción a Java y JavaScript

Java y JavaScript son lenguajes fundamentales en el desarrollo web, y el uso de multimedia en aplicaciones web es crucial para mejorar la experiencia del usuario. Conocer las características y las bibliotecas disponibles, como la Java Sound API, permite ampliar las capacidades y la funcionalidad de las aplicaciones web.

10 - 10

Video

Algunos puntos clave sobre el uso de video son:

• Elemento <video>

HTML5 introduce el elemento <video> que permite insertar archivos de video en una página web. Se admiten diferentes formatos de video, como MP4, WebM y Ogg.

• Control de reproducción

De igual manera que con los elementos de audio, JavaScript proporciona métodos para controlar la reproducción de video, como play(), pause() y stop(). También se pueden establecer eventos y manipular aspectos como el volumen y el tamaño del video.

Esto se logra mediante la herencia y la capacidad de que los objetos se comporten de diferentes maneras según el contexto.

El lenguaje Java se diseñó para ser seguro, portátil y de alto rendimiento. Inicialmente, Java se centró en aplicaciones de escritorio, pero rápidamente se extendió a otras áreas, como el desarrollo de aplicaciones empresariales y, posteriormente, el desarrollo web.

Con el tiempo, Java se convirtió en uno de los lenguajes de programación más populares y se utilizó ampliamente en una variedad de dominios, incluyendo el desarrollo de aplicaciones web y móviles.

Prototipado

A diferencia de Java, JavaScript utiliza un modelo basado en prototipos en lugar de clases. Los objetos en JavaScript se crean a partir de prototipos existentes y se pueden modificar dinámicamente.

APIs adicionales

WebRTC API Permite la comunicación en tiempo real entre navegadores web, incluyendo audio y video. Se utiliza comúnmente para aplicaciones de videoconferencia y streaming de contenido multimedia en tiempo real.

Web Audio API Permite generar, manipular y reproducir audio en tiempo real. Proporciona funcionalidades para sintetizar audio, aplicar efectos, realizar mezclas y crear visualizaciones de audio interactivas.

Imágenes

Algunos aspectos importantes sobre el uso de imágenes en tecnologías web son:

• Elemento <img>

El elemento <img> de HTML se utiliza para insertar imágenes en una página web. Se pueden especificar atributos como la ruta de la imagen, el tamaño, el texto alternativo y los atributos de estilo.

• Manipulación de imágenes

JavaScript proporciona una amplia gama de funcionalidades para manipular imágenes en tiempo real, como cambiar el tamaño, aplicar efectos visuales, ajustar el brillo y el contraste, entre otros.

Ejemplos

En este ejemplo, se crea un formulario que contiene tres campos: Nombre, Email y Mensaje. Cada campo tiene una etiqueta label para proporcionar una descripción. Los campos de texto se crean utilizando la etiqueta input, donde se especifica el tipo de campo (text e email en este caso), un id único y un name que se utilizará para identificar el campo en el servidor. El campo de mensaje se crea utilizando la etiqueta textarea, que permite al usuario ingresar texto de múltiples líneas. El atributo required se agrega a cada campo para indicar que es obligatorio completarlo antes de enviar el formulario. El formulario tiene un botón de envío (submit) que, al hacer clic, enviará los datos del formulario al archivo procesar.php utilizando el método POST. Puedes cambiar el valor del atributo action para que apunte a tu propio script de procesamiento de formulario.

Enviar

Ejemplo de uso multimedia en Java

En este ejemplo, utilizamos AudioSystem para obtener una instancia de Clip, que es una interfaz para reproducir clips de audio. Luego, cargamos un archivo de audio audio.wav usando AudioInputStream y abrimos el clip con el audio. Luego, llamamos a clip.start() para iniciar la reproducción del audio. Después de esperar 3 segundos, utilizando Thread.sleep(), detenemos la reproducción llamando a clip.stop(), cerramos el clip y cerramos el AudioInputStream.

Ejemplo de uso multimedia en JavaScript

Este ejemplo muestra un reproductor de audio básico en JavaScript. Utiliza la etiqueta <audio> de HTML5 para reproducir un archivo de audio (audio.mp3). Al cargar la página, se muestra un reproductor con los controles de reproducción predeterminados. Además, se agregan dos botones Play y Pause que llaman a las funciones playAudio() y pauseAudio(), respectivamente, para controlar la reproducción del audio.

Elementos multimedia HTML

Se integra a los ya mencionados: <audio>, <img> y <video>, el elemento <canvas> que ofrece una API de dibujo en HTML5, permite crear y manipular imágenes en tiempo real, mediante la programación en JavaScript. Proporciona métodos para dibujar formas, aplicar filtros, transformaciones, entre otros.

Ejemplos

En este ejemplo, se crea un formulario que contiene tres campos: Nombre, Email y Mensaje. Cada campo tiene una etiqueta label para proporcionar una descripción. Los campos de texto se crean utilizando la etiqueta input, donde se especifica el tipo de campo (text e email en este caso), un id único y un name que se utilizará para identificar el campo en el servidor. El campo de mensaje se crea utilizando la etiqueta textarea, que permite al usuario ingresar texto de múltiples líneas. El atributo required se agrega a cada campo para indicar que es obligatorio completarlo antes de enviar el formulario. El formulario tiene un botón de envío (submit) que, al hacer clic, enviará los datos del formulario al archivo procesar.php utilizando el método POST. Puedes cambiar el valor del atributo action para que apunte a tu propio script de procesamiento de formulario.

Enviar

Manipulación del DOM

JavaScript permite interactuar con el DOM (Modelo de Objetos del Documento) de una página web para modificar su contenido y comportamiento dinámicamente. Esto incluye la capacidad de agregar, eliminar y modificar elementos HTML, y aplicar estilos.

Bibliotecas de reproducción de audio

Java Sound API Proporciona capacidades para la reproducción y manipulación de audio en Java. Permite reproducir y grabar audio, mezclar múltiples pistas, aplicar efectos de sonido, entre otros.

Funciones de primera clase

En JavaScript, las funciones son ciudadanos de primera clase, lo que significa que pueden tratarse como cualquier otro objeto. Pueden asignarse a variables, pasarse como argumentos y devolverse como valores de función.

JavaScript se convirtió rápidamente en un componente esencial del desarrollo web, debido a su capacidad para agregar interactividad y dinamismo a las páginas web.

A medida que la web evolucionó, JavaScript se fortaleció y se incorporaron nuevas características y funcionalidades. Actualmente, JavaScript es un lenguaje de programación versátil y potente, que se ejecuta tanto en el navegador como en el servidor (con Node.js) y se utiliza para desarrollar aplicaciones web completas, desde una sola página hasta aplicaciones empresariales complejas.

Figura 1. This is a logo for w:node.js [Logotipo], (Wikimedia Commons, 2016).

Audio

Algunos puntos destacados sobre el uso de audio en tecnologías web son:

• Elemento <audio>

HTML5 introduce el elemento <audio> que permite insertar archivos de audio en una página web. Se admiten diferentes formatos de audio, como MP3, Ogg y WAV.

• Control de reproducción

JavaScript proporciona métodos para controlar la reproducción de audio, como play(), pause() y stop(). También se puede ajustar el volumen, establecer bucles y manejar eventos relacionados con el audio.

Estos elementos proporcionan métodos y eventos que permiten controlar la reproducción, interactuar con el usuario y realizar acciones en respuesta a eventos multimedia, como el inicio o finalización de la reproducción de audio o video.

Además, JavaScript ofrece capacidades avanzadas para manipular imágenes en tiempo real, a través del elemento <canvas>, que permite dibujar y transformar imágenes mediante programación.

De acuerdo con Martínez (2020):

La Programación Orientada a Objetos (POO) es un modelo o un estilo de programación que nos da unas guías sobre cómo trabajar con él. Se basa en el concepto de clases y objetos. Este tipo de programación se utiliza para estructurar un programa de software en piezas simples y reutilizables de planos de código (clases), para crear instancias individuales de objetos.

Una clase define la estructura y el comportamiento de los objetos, mientras que los objetos son instancias concretas de una clase.

De acuerdo con Aguirre (2022):

Para que un cliente se comunique con un servidor requiere de una interfaz que trabaje como intermediaria entre los dos sistemas. Esta interfaz se conoce como API, por sus siglas en inglés Application Programming Interface, o en español Interfaz de Programación de Aplicaciones. Una API es un sistema que forma una interfaz que, en muchos casos, trabaja con un estándar para el manejo de información como XML o similar. Por lo general se desarrolla del lado del servidor. Las APIs sirven para distintas cosas. Por ejemplo, puede ser un servicio web que se encargue de trabajar con datos para retornar información sobre el clima, el estado del tránsito, monetaria o de cualquier otro tipo.

Bibliotecas de procesamiento de imágenes

Java 2D API Ofrece funcionalidades para el procesamiento y manipulación de imágenes en Java. Permite cargar, visualizar, redimensionar, recortar, aplicar filtros y realizar operaciones gráficas avanzadas en imágenes.

Esto promueve la reutilización de código y la organización jerárquica de las clases.

Bibliotecas de reproducción de video

Java Media Framework (JMF) Es una API para trabajar con video y audio en Java. Permite reproducir, capturar, transmitir y manipular contenido multimedia en diferentes formatos. También admite la sincronización de audio y video, y ofrece control de calidad de transmisión.