SENA Tecnólogo en Produccón Multimedia
1. INTRODUCCIÓN
El diseño de aplicaciones web consiste en presentar servicios a través de internet
con la incorporación de diversos tipos de tecnologías, para ser visualizadas a través
de navegadores. Algunas de las posibles tecnologías a considerar incluyen la
utilización de lenguajes de programación del lado del servidor tales como JSP (Java
Server Pages), PHP (Hipertext Preprocesor) o ASP (Active Server Pages);
herramientas para creación de páginas automáticas o a partir de la implementación
de textos en HTML y JavaScript entre otros. En este material se concentrará en la
utilización de HTML en su versión 5.
HTML5 es la evolución y unificación de diferentes tecnologías Web que venían
trabajando de manera separada: HTML, CSS3 y JAVASCRIPT, estableciendo la
estructura el estilo y la funcionalidad de una manera integral. No se trata de un
nuevo lenguaje de programación, sino de la incorporación de nuevas reglas
semánticas y sintácticas al básico HTML con el fin de poder sacar el mejor provecho
de los avances en el mundo de la Web y satisfacer las necesidades de interactuar
con aplicaciones que puedan ejecutarse en diferentes dispositivos sin necesidad de
crear un código diferente para cada uno de ellos.
En su desempeño como tecnólogo en producción de multimedia, se hace necesario
el uso de este tipo de tecnologías para apoyar el desarrollo de proyectos basados
en la web, maximizando la interoperabilidad y proporcionando todos los recursos
necesarios para una agradable experiencia al usuario.
1
2. ESTRUCTURA DE CONTENIDOS
1. Introducción.
2. Estructura de contenidos.
3. Mapa de contenido.
4. Desarrollo de contenidos.
4.1. JavaScript.
4.1.1. Referenciando elementos HTML desde JavaScript.
4.1.2. Asignando eventos a los elementos HTML5 desde JavaScript.
4.1.3. Ejemplos.
> Mensajes con JavaScript.
> Reloj digital.
> Galería de Imágenes en lista.
5. Glosario.
6. Bibliografía. 2
3. MAPA DE CONTENIDOS
3
4. DESARROLLO DE CONTENIDOS
4.1. JavaScript.
La tecnología encargada de brindar interactividad en HTML5 es JavaScript, el
código JavaScript puede estar embebido dentro de la página HTML o en un
archivo aparte con su propia extensión .js. En este último caso que es el más
recomendado, se debe incluir la etiqueta <script> dentro del encabezado de la
página Web, referenciando el nombre del archivo .js. en su atributo src.
Ejemplo:
<script src=”[Link]”></script>
4.1.1. Referenciando elementos HTML desde JavaScript
Para acceder a un determinado elemento HTML desde JavaScript existen
diferentes mecanismos llamados selectores:
Selector Accede a Ejemplo 4
getElementsByTagName(‘p’)
Todos los elementos Retorna un arreglo con todos los elementos
Pexistentes en la página Web.
getElementsByTagName de una determinada getElementsByTagName(‘p’)[0]
etiqueta. Accede al primer elemento tipo P de la página
Web.
Un elemento en getElementById(‘miID’)
Accede al elemento de la página Web cuyo
particular identificado ID es miID
getElementByID con un determinado
ID.
Uno o varios elementos getElementsByClassName(‘miClase’)
Accede a los elementos cuyo className sea
con un className miClase
getElementsByClassName determinado.
Un elemento mediante querySelector(“p:first-child”)
Accede al primer elemento P de la página
querySelector la sintaxis de selección Web
de CSS.
Una lista de elementos querySelectorAll(“#principal p”)
Retorna un arreglo con todos los elementos P
querySelectorAll que coincida con el que sean hijos de principal
patrón de búsqueda
CSS.
4. DESARROLLO DE CONTENIDOS
4.1.2. Asignando eventos a los elementos HTML5 desde JavaScript
El mecanismo estándar para asignar eventos a los elementos HTML5 es utilizando
el método addEventListener, el cual posee la siguiente sintaxis:
[Link] (‘evento’,función,boolean)
Donde:
Elemento: Es la referencia a cualquier elemento HTML.
Evento: Nombre del evento que se desea controlar.
Función: Nombre de la función encargada de gestionar el evento.
Boolean: Recibe el valor True o False dependiendo si se desea emplear el evento
anidado con otros eventos o no. Generalmente este parámetro es False.
4.1.3. Ejemplos.
> Mensajes con JavaScript.
5
[Link](“#miTitulo”).addEventListener(‘click’,procesarClick,
false);
Define que la función procesarClick se debe ejecutar al hacer click sobre el
elemento HTML identificado con el id miTitulo.
Ahora es posible con código JavaScript asignar eventos al menú de la página Web
para que cada vez que se dé clic en alguna de sus opciones, se presente un
respectivo mensaje:
4. DESARROLLO DE CONTENIDOS
La página HTML debe indicar su acceso a un archivo Javascript:
El código JavaScript, guardado en un archivo llamado [Link] y
ubicado en el directorio donde se encuentra el archivo HTML es el siguiente:
Línea Explicación
1 Al cargar la página (evento load) llama a la función asignarEventos
2..7 Accede a los elementos de la página Web identificados como
menu1, menu2 y menu3 y le asigna al evento clic la ejecución de
una determinada función (clic1, clic2 o clic3)
8..19 Funciones que se ejecutan al hacer clic sobre alguno de los menús
y que presentan un respectivo mensaje
4. DESARROLLO DE CONTENIDOS
> Reloj digital
En el siguiente ejemplo se crea un reloj digital programado en JavaScript:
Línea Explicación
6 Abre un bloque de código para JavaScript.
7 Un comentario de los que se pretende hacer con el bloque de
código.
8 - 16 Funcion que trae la hora del sistema y le da un formato de Horas :
Minutos : Segundos.
16 En esta línea se accede al valor del la entrada de texto que esta en
la línea 23 donde se muestra la hora en el formato HH:MM:SS
26 - 28 Esta línea hace que la función se repita cada 500 milesegundos,
creando así un reloj digital.
4. DESARROLLO DE CONTENIDOS
Se inserta un bloque de estilos en la línea 6 para dar formato al reloj digital:
Vista en el navegador,
> Galería de Imágenes en lista.
En el siguiente ejemplo se crea una galería de imágenes que cambia dependiendo
del ítem seleccionado en una lista de opciones:
4. DESARROLLO DE CONTENIDOS
Vista en el navegador,
9
5. GLOSARIO
BROWSER: También denominado navegador. Es un software que permite el
acceso a Internet, interpretando la información de archivos y sitios web para que
éstos puedan ser leídos.
CSS: Las hojas de estilo en cascada o (Cascading Style Sheets por sus siglas en
inglés) hacen referencia a un lenguaje de hojas de estilos usado para describir la
presentación semántica (el aspecto y formato) de un documento escrito en lenguaje
de marcas. Su aplicación más común es dar estilo a páginas webs escritas en
lenguaje HYPERLINK "[Link] \o "HTML"HTML y
HYPERLINK "[Link] \o "XHTML"XHTM.
HTML: HyperText Markup Language, Lenguaje de marcación de hipertexto, es un
estándar que, en sus diferentes versiones, define una estructura básica y un código
para la definición de contenido de una página web, como texto, imágenes, etc.
10
6. BIBLIOGRAFÍA
Gauchat, Juan Diego. (2012). El gran libro de HTML5, CSS3 y Javascript (1ª.Ed).
Barcelona, España: Ediciones técnicas Marcombo.
Wikipedia La enciclopedia libre. Consultado en septiembre 30 de 2013, disponible
en http:[Link].
11
Control de documento
Construcción Objeto de Aprendizaje
JavaScript
Desarrollador de contenido Jesualdo Morantes Meza
Experto temático Andrés Julián Valencia Osorio
Luis Antonio Suárez Martínez
Asesor pedagógico
Maria Teresa Camargo Serrano
Producción Multimedia Antonio Vecino Valero
Programador Roberto Chajín Ortiz
Líder expertos temáticos Tatiana Acosta Patiño
Líder línea de producción Santiago Lozada Garcés
12