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

Desarrollo y reutilización de componentes software

y multimedia mediante lenguajes de guión

Programación web en el entorno cliente. 13/10/2017 José Miguel Castillo Castillo

DESARROLLO Y REUTILIZACIÓN DE COMPONENTES SOFTWARE Y MULTIMEDIA MEDIANTE LENGUAJES DE GUIÓN

1

ÍNDICE DE CONTENIDO. DESARROLLO Y REUTILIZACIÓN DE COMPONENTES SOFTWARE Y MULTIMEDIA MEDIANTE LENGUAJES DE GUIÓN. 1. ARQUITECTURAS DE APLICACIONES WEB 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 2. NAVEGADORES WEB 2.1 Arquitectura de un navegador 2.2 Navegadores de uso común 2.3 Seguridad en navegadores 2.4 Integración de aplicaciones en navegadores 2.5 Conformidad a estándares 3. CREACIÓN DE CONTENIDO WEB DINÁMICO 3.1 Fundamentos de programación 3.2 Lenguajes para el desarrollo de contenido dinámico 4. LENGUAJES DE GUIÓN DE USO GENERAL 4.1 Integración de lenguajes de guión en navegadores web 4.2 Estructura general de un programa en un lenguaje de guión 4.3 Funciones 4.4 Manipulación de texto 4.5 Listas - ARRAYS 4.6 Formatos estándar de almacenamiento de datos 4.7 Objetos 4.8 El modelo de documento web 4.9 Gestión de eventos 4.10 Gestión de errores 4.11 Usos específicos de lenguajes de guión 4.12 Entornos integrados 5. CONTENIDOS MULTIMEDIA 5.1 Definición de multimedia. Tipos de recursos multimedia 5.2 Inclusión de contenido multimedia en páginas web 5.3 Gráficos multimedia 5.4 Audio 5.5 Vídeo 5.6 Animaciones multimedia 5.7 Elementos interactivos


2

1. ARQUITECTURAS DE APLICACIONES WEB Sabemos que los arquitectos tradicionales diseñan y coordinan la construcción de edificios pues de forma paralela podemos especificar que los arquitectos web diseñan y coordinan el desarrollo de sitios web. Los sitios web son una conjunción muy compleja de distintos sistemas integrados entre sí. El resultado final será un sitio que pueda resolver las necesidades de negocios: Vender productos y servicios online y servir mejor a las necesidades de los clientes.

1.1. Esquema general Las aplicaciones deben ser diseñadas sobre las necesidades de las personas que van a utilizarlas, de la misma forma que los edificios deben ser diseñados en base a las necesidades de sus ocupantes. Encaje perfectamente en esta comparación el concepto universal de accesibilidad, independientemente de los contenidos del sitio web debemos hacer páginas para que todos puedan adquirir los conocimientos y servicios que se presten. Por ejemplo, en los edificios los picaportes y las manijas de las puertas están a un metro de altura porque esa es la altura a la que se encuentran las manos. En la web los menús de navegación no tendrían que ser diferentes... debería estar donde las personas los necesitan. Igualmente hay ayudas para que quien no puede acceder de a forma habitual pueda hacerlo por otro sitio u otros métodos pero con el resultado análogo al sistema convencional. Si en el diseño de edificios son fundamentales los conocimientos sobre las propiedades estructurales de los materiales, la electricidad, la mecánica, etc. en el desarrollo web se requieren de conocimientos de lenguajes programación y estructura de bases de datos como son el protocolo TCP/IP, el lenguaje HTML, lenguajes de definición de datos, etc. La arquitectura web engloba todo lo que se necesita para la creación de una página web. De forma más académica podríamos definir la arquitectura web como la disciplina encargada de organizar, estructurar y etiquetar el contenido y los sistemas de búsqueda y recuperación de información de cualquier herramienta incluida en el sitio web, es por tanto fundamental la coordinación de todos los servicios que deseamos implantar en la web.

NOTA: Nunca debemos olvidar que hay que crear sitios webs útiles, con contenido, porque en caso contrario nadie los visitará.


3

1.2. Arquitectura en capas Arquitectura de dos capas. La arquitectura tradicional de cliente/servidor también es conocida como arquitectura de dos capas. Es necesaria una interfaz de usuario que se instala en una estación de trabajo (que puede ser un PC) con la función principal de enviar solicitudes a un servidor para ejecutar operaciones complejas. Por ejemplo, una estación de trabajo utilizada como cliente puede ejecutar una aplicación de interfaz de usuario que lanza preguntas a un servidor central de bases de datos. Las herramientas utilizadas en diseños de dos capas, constantemente están cambiando por lo que no se recomienda la dependencia a largo plazo de dichas aplicaciones porque puede complicar el escalamiento futuro o las implementaciones.

Presenta las siguientes ventajas:

Las herramientas para el desarrollo con dos capas son robustas y evaluadas.

Las soluciones de dos capas trabajan bien en ambientes no dinámicos estables, pero no se ejecutan bien en organizaciones rápidamente cambiantes.

Y las siguientes desventajas:

Los ambientes de dos capas requieren un control excesivo de las versiones y demandan esfuerzo de distribución de la aplicación cuando se les hacen cambios.

La seguridad del sistema en un diseño de dos capas es compleja y requiere administración de las bases de datos.


4

Arquitectura de tres capas. La arquitectura de tres capas es un diseño novedoso que introduce una capa intermedia en todo el proceso. Cada capa es un proceso separado y bien definido corriendo en plataformas separadas. Actualmente la arquitectura de la mayoría de las aplicaciones web suelen presentar un esquema de tres niveles:

1. El primer nivel consiste en la capa de presentación que incluye al navegador y al propio el servidor web como responsable de presentar los datos un formato adecuado.

2. El segundo nivel está referido habitualmente a programa concreto o ejecución de script. 3. El tercer nivel proporciona al segundo los datos necesarios para su ejecución. Una aplicación

Web típica recogerá datos del usuario (primer nivel), los enviará al servidor, que ejecutará un programa (segundo y tercer nivel) y cuyo resultado será formateado y presentado al usuario en el navegador (primer nivel otra vez).

Podemos, en la siguiente imagen, observar los niveles en la arquitectura de tres capas que se aplica al diseñar aplicaciones web.

Las principales ventajas de la arquitectura de tres capas son:

Las llamadas de la interfaz del usuario en la estación de trabajo son más flexibles que en el diseño de dos capas porque la estación solo necesita transferir parámetros a la capa intermedia.

La estructura de datos puede ser modificada sin cambiar la interfaz del usuario en el cliente.

El código de la capa intermedia puede ser reutilizado por múltiples aplicaciones si está diseñado en formato modular.

Las desventajas de las arquitecturas de tres capas son:

Puede provocarse un incremento del tráfico en la red.

Los exploradores actuales no son todos iguales y no están todos preparados adecuadamente para ser eficaces.


5

1.3. Interacción entre las capas cliente y servidor

En este tipo de arquitectura la capacidad de proceso está repartida ya que estamos ante un modelo de aplicación distribuida en el que las tareas se reparten entre los proveedores de recursos o servicios, llamados servidores, y los demandantes, llamados clientes. El funcionamiento básico parte de un cliente que realiza peticiones a otro programa, el servidor, quien le da respuesta. Esta idea también se puede aplicar a programas que se ejecutan sobre una sola computadora, aunque es más ventajosa en un sistema operativo multiusuario distribuido a través de una red de ordenadores. NOTA: La separación entre cliente y servidor es una separación de tipo lógico, donde el servidor no se ejecuta necesariamente sobre una sola máquina ni es necesariamente un sólo programa. Cuando hablamos de servidores nos referimos a servidores web, servidores de almacenamiento de archivos, servidores del correo, etc. La arquitectura cliente-servidor sustituye a la arquitectura monolítica en la que no hay distribución, tanto a nivel físico como a nivel lógico. NOTA: Una red cliente-servidor es aquella red de comunicaciones en la que todos los clientes están conectados a un servidor, en el que se centralizan los diversos recursos y aplicaciones con que se cuenta. Todas las gestiones que se realizan se concentran en el servidor donde se conocen qué servicios tienen prioridad, qué archivos son de uso público y cuales son de uso restringido, qué ficheros son de sólo lectura y cuáles pueden ser modificados, etc. Esquemáticamente podríamos describir la relación cliente / servidor como una vinculación petición / respuesta:


6

1.4. Arquitectura de la capa cliente El cliente más usado es el navegador web ya que con él podemos usar los servicios de páginas webs que ofrecen los distintos servidores sin que para ello se tenga que instalar ningún software específico. Estas páginas web son el componente principal de una aplicación o sitio web. Los navegadores solicitan páginas estáticas o dinámicas a los servidores web. Puede darse el caso que las páginas que contienen código HTML y scripts dinámicos, sean ejecutadas por el servidor antes de entregar la página. La mayor parte de los sitios webs poseen partes dinámicas (ASP, PHP, etc.), y están agrupadas lógicamente para dar un servicio al usuario. Un applet es una aplicación especial que se ejecuta dentro de un navegador. Las labores del cliente y del servidor están perfectamente diferenciadas como se observa en la siguiente ilustración.

Ejemplo de modelos cliente / servidor

Cuando leemos un artículo en Wikipedia, el navegador web sería el cliente, y los ordenadores, las bases de datos, y los elementos que componen Wikipedia serían considerados el servidor.


7

2. NAVEGADORES WEB El objetivo primordial de un navegador web es permitir la visualización de documentos con textos y recursos multimedia que nos ofrecen los servidores en Internet. Estos documentos pueden estar ubicados en el ordenador en donde está el usuario pero también pueden estar en cualquier otro dispositivo que esté conectado al equipo del usuario o a través de Internet, siempre que se dispongan de los recursos necesarios para la transmisión de los documentos (por ejemplo, un software que haga de servidor web).

2.1. Arquitectura de un navegador Los navegadores poseen hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen y de esta forma se va creando todo el entramado de archivos que componen cualquier sitio web. A este seguimiento de enlaces de una página a otra, ubicada en cualquier ordenador conectado a Internet, es lo que llamamos navegación. La comunicación entre el servidor web y el navegador se realiza mediante el protocolo HTTP, aunque actualmente soportan otros protocolos como FTP, Gopher, y HTTPS (una versión cifrada de HTTP basada en Secure Socket Layer o SSL). NOTA: No olvidemos nunca que la función principal del navegador es descargar documentos HTML y mostrarlos en pantalla. En la actualidad, no solamente descargan este tipo de documentos sino que muestran con el documento sus imágenes, sonidos e incluso vídeos en streaming bajo diferentes formatos y protocolos. Además, permiten almacenar la información en el disco o crear marcadores (bookmarks) de las páginas más visitadas. Interfaz de usuario. Es como toda interfaz, la cara visible del navegador, es decir lo que nos encontramos al ejecutarlo o abrirlo, mostrando todo lo necesario para interactuar con cualquier página web. El interfaz de usuario debe ser atractivo y de fácil uso. Por ejemplo, el navegador Mozilla Firefox,


8

Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web consortium W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en la web. Su objetivo es crear una web que trabaje mejor para todos, con sitios accesibles a más personas y que funcionen en cualquier dispositivo de acceso a Internet. Motor de exploración. Un motor de búsqueda, también conocido como buscador, es un sistema informático que busca archivos almacenados en servidores web gracias a su «spider» Un ejemplo son los buscadores de Internet (algunos buscan únicamente en la web, pero otros lo hacen además en noticias, servicios como Gopher, FTP, etc.) cuando se pide información sobre algún tema. Las búsquedas se hacen con palabras clave o con árboles jerárquicos por temas; el resultado de la búsqueda es un listado de direcciones web en los que se mencionan temas relacionados con las palabras clave buscadas. Los motores de búsqueda contienen generalmente más información que los directorios aunque se debe destacar que estos últimos también han de construirse a partir de búsquedas no automatizadas lo que les limita más la expansión. Los buenos directorios combinan ambos sistemas. Motor de presentación. Un motor de navegador web o motor de renderizado es un software que contiene elementos de marcado (como HTML, XML, archivos de imágenes, etc.) e información de formateo (como CSS, XSL, etc.) con la intención de mostrar el contenido ya formateado en la pantalla. Todos los navegadores web incluyen necesariamente algún tipo de motor de renderizado. También contamos con los intérpretes de Javascript que aunque cada navegador suele tener su propio interprete Javascript no son realmente lo mismo. Mientras que la función del motor del navegador es renderizar y pintar la parte gráfica de la web, el motor de Javascript es el intérprete del código y quien ejecuta un script en función de unas instrucciones. La mayoría de los motores de renderizado se desarrollaron para los navegadores aunque algunos se usan también en aplicaciones web o sistemas operativos. Los motores gráficos más conocidos son:

WebKit para Safari.

Tasman para navegadores y aplicaciones ofimáticas de Microsoft en Macs.

Trident para Internet Explorer desde la versión 4.0.

Chakra para Internet Explorer 9.

Boxely para aplicaciones AOL.

GtkHTML para Novell Evolution y otros programas GTK+.

HTMLayout motor de renderizado embebido HTML/CSS.

KHTML para Konqueror.


9

NetFront para Access NetFront.

NetSurf para NetSurf.

Presto para Opera 7 e inferiores, Macromedia Dreamweaver MX y MX 2004 (Mac), y Adobe

Creative Suite 2.

Prince XML para Prince XML.

Robin para The Bat!

Tkhtml para hv3.

El motor de texto más conocido en administradores de sistemas es lynx, el cual tiene su propio motor de renderizado. Veamos algunos de estos motores de presentación en más detalle:

Motor de navegador Gecko. Es un motor de renderizado libre escrito en C++ y originalmente desarrollado por Netscape. Actualmente su desarrollo es gestionado por la Fundación Mozilla y la Corporación Mozilla. Mozilla diseñó el motor de su navegador (Gecko) como un componente aparte del propio navegador

Motor de navegador Trident. Fue diseñado como un componente software que permitía a los

desarrolladores de software añadir la funcionalidad de navegación web a sus propias aplicaciones fácilmente. Presenta una interfaz COM para acceder y editar páginas web en cualquiera de los entornos que soporten COM, como C++ y .NET.

Por ejemplo, un control de navegación web puede ser añadido a un programa en C++ y Trident puede usarse para acceder a la página mostrada en el navegador y acceder a valores de elementos.


10

Motor de navegador WebKit. Está basado originalmente en el motor de renderizado KHTML del navegador web del proyecto KDE, Konqueror.

Webkit incluye dos frameworks de más bajo nivel: WebCore, un analizador sintáctico y motor de renderizado de HTML basado en KHTML, y JavaScriptCore, un intérprete de JavaScript basado en KJS. Los principales navegadores que usan WebKit son Opera y Google Chrome, o Android. Módulos auxiliares Persistencia en el cliente, interfaz de red, intérprete de scripts, infraestructura de presentación:

Persistencia en el cliente. Algunos navegadores web soportan un mecanismo de persistencia basado en script que permite que la página almacene información localmente para su uso posterior.

Internet Explorer, por ejemplo, soporta información persistente en el historial del navegador, en los favoritos, en un almacenamiento XML, o directamente en una página web guardada en disco.11

Interfaz de red. Muchas de las utilidades que usamos todos los días, como el correo electrónico o los navegadores web, utilizan protocolos de red para comunicarse. Siempre que se habla de interfaces de redes, se habla de protocolos.

Por ejemplo, cuando queremos establecer una conexión entre ordenadores mediante una red, hay muchos factores en juego, interviniendo el medio físico en el que se producirá la conexión (cable, ondas electromagnéticas, etc.), la tecnología que se utilizará (tarjetas de red Ethernet, módems, etc.), los paquetes de datos que enviaremos, las direcciones o destinos dentro de una red... El nivel más bajo de todas estas capas sería el nivel físico, es decir el medio que se va a utilizar, los voltajes utilizados, etc. Sobre esa capa se construye la siguiente, en donde transformamos las señales eléctricas en datos propiamente dichos (capa de enlace de datos). Iremos de esta manera agregando capas hasta llegar a la capa de aplicación, que es con la que interactuaremos para realizar nuestros trabajos. Existen diferentes interfaces de red, en función de su uso y la tecnología empleada, las más utilizadas comúnmente son:

lo: local host o interfaz de loopback. Un loopback es un método que admite direcciones de Internet y permite a los equipos conocer la dirección real del equipo que aloja ese sitio web.

PPP: peer-to-peer protocol o red entre pares (P2P, por sus siglas en inglés), es una red de computadoras en la que todos o algunos aspectos funcionan sin clientes ni servidores fijos.


11

Intérprete de scripts. Los programas anfitrión más comunes para JavaScript son los navegadores web que generalmente usan una Application Programming Interface (API) pública para crear objetos del anfitrión (del inglés host objects) reflejados en el DOM de un documento y accesibles a través de JavaScript.

Un servidor web es otra aplicación informática en que se suele integrar un intérprete de JavaScript.

2.2. Navegadores de uso común. Comparativa En la actualidad existen un buen número de navegadores de Internet, la gran mayoría gratuitos con muchas aportaciones. Cada uno presenta ventajas y desventajas. - Google Chrome. Desde su lanzamiento en el 2008 ha tenido un meteórico ascenso en el mercado. Una de sus ventajas es que está disponible para una gran cantidad de sistemas operativos incluyendo Windows, Ubuntu, Debian, Chrome OS, entre otros y para sistemas operativos orientados a dispositivos móviles como Android y iOS. En cuanto a seguridad Chrome utiliza un sistema de listas negras donde incluyen sitios que contienen software dañino y manda advertencias a los usuarios cuando intentan accederlos. Google Chrome utiliza el principio de arquitectura de multiproceso.

- Mozilla Firefox. Su mayor ventaja respecto a los demás navegadores de internet es su seguridad seguro y capacidad de personalización. Una de las mayores apuestas de Mozilla con vistas al mercado móvil es el lanzamiento de su propio sistema operativo Firefox OS en una dura competencia con Android que está bajo el amparo de Google. - Internet Explorer. A partir de la versión de Internet Explorer 10 el programa ganó mucho en velocidad en comparación a sus competidores más cercanos (Firefox y Chrome) gracias a su aceleración por hardware. Además ofrece un interfaz más sobria y sencilla claramente optimizado para su uso en dispositivos táctiles así como mejoras en la seguridad permitiendo bloquear más malware que sus competidores además de proteger el equipo contra descargas malintencionadas. Siempre ha existido mucho resquemor respecto a las intenciones de Microsoft en el aspecto de la privacidad.


12

2.3. Seguridad en navegadores Las vulnerabilidades que se detectan en los programas informáticos más utilizados (navegadores de Internet, procesadores de texto, programas de correo, etc.) suelen ser, precisamente por su gran difusión, un blanco habitual de los creadores de virus. Para evitarlo, una vez detectada una vulnerabilidad, las compañías fabricantes de software ponen rápidamente a disposición de sus clientes actualizaciones, llamadas parches de seguridad. Por ejemplo, en el caso de Microsoft Explorer podemos usar el sistema de actualizaciones Windows Update y en el caso de Apple, las actualizaciones de MacOS. Lo mismo ocurre en el caso de las actualizaciones de las distintas distribuciones de Linux o Unix. Windows Update.

En el momento de conectarse a Internet es conveniente que, además de cuidar los aspectos básicos del ordenador, se tengan en cuenta otras medidas de prudencia para poder navegar de una forma más segura:

Utilizar versiones actualizadas de los navegadores para que esté protegido frente a vulnerabilidades.

Navegar por sitios Web conocidos.

No dejar desatendidos los ordenadores mientras están conectados.

No aceptar la ejecución de programas cuya descarga se active sin que nos lo solicite.

No descargues/ejecutes ficheros desde sitios sospechosos porque pueden contener código potencialmente malicioso.

No aceptar certificados de servidor de páginas Web si su navegador le indica que no lo reconoce. - Pueden tratarse de páginas falsas ideadas para capturar información personal o privada.

Analizar con un antivirus todo lo que se descara antes de ejecutarlo en el equipo.

Configurar el nivel de seguridad de tu navegador según sus preferencias.

Instalar un cortafuego que impida accesos no deseados a/desde Internet.

Descargar los programas desde los sitios oficiales para evitar suplantaciones maliciosas.

Podemos utilizar programas anti pop-up para eliminar las molestas ventanas emergentes que aparecen durante la navegación, o configurar el navegador para evitar estas ventanas.

Utilizar un usuario sin permisos de Administrador para navegar por Internet, así impedimos la instalación de programas y cambios en los valores del sistema.

Borrar las cookies, los ficheros temporales y el historial cuando utilicemos equipos ajenos (públicos o de otras personas) para no dejar rastro de la navegación.


13

2.4. Integración de aplicaciones en navegadores. Adaptadores (plugins) Un complemento es una aplicación que se incluye en otra para aportarle una función nueva específica. Esta aplicación adicional es ejecutada por la aplicación principal e interactúan por medio de la API. También se conoce como plugin, addon (añadido) o extensión. Los complementos permiten:

Que los desarrolladores externos colaboren con la aplicación principal extendiendo sus funciones.

Reducir el tamaño de la aplicación.

Separar el código fuente de la aplicación a causa de la incompatibilidad de las licencias de software.

En los navegadores web es frecuente requerir ciertos complementos que amplían las funciones de las páginas web para ver contenidos interactivos, videos y cosas similares. Un ejemplo conocido es Adobe Flash Player, un complemento que carga animaciones multimedia interactivas y se usa, por ejemplo, para ver videos. Adaptadores comunes en diferentes navegadores.

Adobe Flash Player. Permite reproducir archivos SWF que pueden ser creados con la herramienta de autoría Adobe Flash o con otras herramientas de Adobe y de terceros. En un sistema operativo tiene el formato de aplicación del sistema, mientras que si el entorno es un navegador, su formato es el de un Plug-in u objeto ActiveX.

Java. Los applets de Java pueden ejecutarse en un navegador web utilizando la Java Virtual Machine (JVM), o en el AppletViewer de Sun. Entre sus características podemos mencionar un esquema de seguridad que permite que los applets que se ejecutan en el equipo no tengan acceso a partes sensibles (por ejemplo no pueden escribir archivos), a menos que uno mismo le dé los permisos necesarios en el sistema. En Java, un applet es un programa que puede incrustarse en un documento HTML, es decir en una página web.

Windows Media Player. El plugin de Windows Media Player es un complemento para ver vídeos WMP en navegadores que no sean Internet Explorer, como Google Chrome o Mozilla Firefox. Es compatible con Windows XP, Vista y 7.

Real Player. Es un reproductor de multimedia que reproduce varios formatos multimedia, c, etc.


14

QuickTime. Es compatible con el estándar MPEG-4 y no es sólo un reproductor, sino un sistema multimedia completo capaz de reproducir, y en casos transmitir, contenidos de alta calidad en Internet y otros dispositivos.

Firebug. Es un paquete de utilidades con el que se puede analizar (revisar velocidad de carga, estructura DOM), editar, monitorizar y depurar el código fuente, CSS, HTML y JavaScript de una página web de manera instantánea. Firebug no es un simple inspector como DOM Inspector, además edita y permite guardar los cambios, un paso por delante del conocido Web Developer. Su atractiva e intuitiva interfaz, con solapas específicas para el análisis de cada tipo de elemento (consola, HTML, CSS, Script, DOM y red), permite al usuario un manejo fácil y rápido. Firebug está encapsulado en forma de plugin o complemento de Mozilla, es Open Source, libre y de distribución gratuita.

Colorzilla. Esta herramienta es ideal para desarrolladores web y diseñadores gráficos que busquen opciones para la estética de su página.

Measurelt. Esta herramienta para diseñadores y desarrolladores web resultará muy interesante para la realización de cualquier diseño web.

Web Developer. Es una extensión para los navegadores web basados en Mozilla Firefox que aporta una serie de utilidades de edición y depuración para desarrolladores web.

Configuración de tipos de ficheros y adaptadores. Veremos cómo instalar y configurar un plugin de mucha utilidad en el desarrollo web como es Firebug. Instalación. Clic en el botón naranja de Install y veremos como aparece un mensaje de seguridad.


15

1. Seleccionamos Install now.

2. Inspeccionar y editar HTML. Muestra el HTML en forma jerárquica (no como viene formateado en el HTML original). A medida que abrimos el árbol podemos ver todos los elementos. 3. Modificar los valores de la CSS.

A medida que nos desplazamos por las cajas concéntricas podemos ver los valores de padding, border, margin, etc. junto a reglas que nos ayudan a visualizarlo en la página y la posibilidad de cambiar los valores.


16

Con la pestaña DOM podremos recorrer el Document Object Model de la página y visualizar o cambiar sus valores. 4. Acceso directo al código HTML.

Con las pestañas de la izquierda también tenemos opciones muy interesantes: si seleccionamos Console podemos escribir y ejecutar comandos.


17

Presenta la posibilidad de editar directamente.

Con la pestaña Script podemos visualizar los JS, ponerle breakpoints y ver las variables.


18

Con Net podemos ver todos los recursos que carga la página, en. Además nos ofrece un pequeño preview de la imagen y/o datos del recurso. Con las pestañas a derecha de all podemos filtrar los tipos de peticiones y lo mejor: captura también las peticiones AJAX con lo que podemos ver tanto lo que se envía como lo que se recibe. 5. Pestaña Net.


19

2.5. Conformidad a estándares W3C es la sigla utilizada por la World Wide Consortium, una organización mundial que se encarga de estudiar, desarrollar y perfeccionar los estándares y recomendaciones que sirve como guía para la elaboración de una web de calidad.

El objetivo de los estándares es conducir a la Web a desarrollar su máximo potencial. Existe una herramienta llamada W3C Validator, que permite validar nuestra web HTML contra esos estándares.

También podemos hacer lo propio con el código CSS, usando otra herramienta como http://jigsaw.w3.org/css-validator/.

Que un sitio sea validado por esa herramienta significa, concretamente, que esa web no posee errores de sintaxis y que no utiliza etiquetas actualmente en desuso. La cantidad de errores que se obtienen de la herramienta puede variar significativamente. Para valores altos, puede ocurrir que exista un efecto dominó, por lo que con la solución de alguno de ellos la cantidad total de errores total puede bajar significativamente. Los estándares no están sólo para ser aplicados por los usuarios finales, sino también por parte de todos los que desarrollan herramientas para uso de la web, como los navegadores web, las aplicaciones web, etc.

http://jigsaw.w3.org/css-validator/


20

3. CREACIÓN DE CONTENIDO WEB DINÁMICO Para crear una página de este tipo no basta con programar en HTML, ya que este lenguaje es muy limitado. Es necesario combinar HTML con otros lenguajes, como JavaScript, VBScript, Java, ASP, PHP, etc. También puede hacerse uso de capas, de animaciones Flash, de applets java y de hojas de estilo CSS. A la combinación de HTML, CSS y Javasript se le conoce como, HTML5, DHTML o HTML dinámico.

3.1. Fundamentos de programación Constantes, variables. Tipos de datos simples y estructurados.

Constantes. Son identificadores para expresar un valor simple que no puede variar durante la ejecución del script.

Por ejemplo, en PHP

Variables. En este caso si puede variar el valor de dichos almacenamientos.

Por ejemplo, en PHP,


21

Expresiones y sentencias. Operadores básicos. Las expresiones regulares son una potente herramienta de programación que muchas veces se deja de lado ya que se toman como herramientas complejas cuando lo que necesitan es un análisis más detenido simplemente. No se deben abusar de las expresiones regulares ya que el coste en recursos de evaluar una expresión regular es considerablemente más costoso que una simple búsqueda de cadenas. La idea general que engloba una expresión regular es crear una cadena de texto (string) especial para compararla con otra, identificarla dentro de una mayor, etc. NOTA: Cuando trabajamos con dos cadenas de caracteres usamos la expresión match para indicar coincidencia en la comparación.

Veamos algunos de los componentes de estas cadenas en un lenguaje de programación muy usada en la construcción de webs dinámicas como es PHP:

Metacaracteres.

Cuantificadores.


22

Agrupadores. Como parte de la notación, siempre encerramos las expresiones regulares entre /, llaves ({}) o #. Por ejemplo, la expresión /ab?c/ hace match con ac y abc. La expresión regular /ab{1,3}c/ establece coincidencias con abc, abbcy abbbc.

Corchetes y paréntesis. Usos

Modificadores

Operadores de Comparación. Los operadores de comparación se utilizan, como su nombre lo indica, para hacer comparaciones entre valores (la gran mayoría de las ocasiones guardados en variables) que necesitan desempeñar un papel en nuestro código. En PHP dichos operadores son:


23

Operadores de Incremento y Decremento. Los operadores de decremento o incremento son de gran utilidad en la programación para establecer variaciones en el valor de la variable a la que se le está aplicando dicho decremento o incremento. Son los conocidos contadores de los bucles. En PHP, los operadores de incremento y decremento son:

Operadores Lógicos. Los operadores lógicos son de extrema utilidad a la hora de decidir si unos valores cumplen ciertas condiciones. En PHP, los operadores lógicos son los siguientes:

NOTA: Los símbolos && y || son abreviaciones o, más aún, son herencia del lenguaje del cual deriva PHP, es decir C/C++. Control de flujo: secuencial, bucles y condicionales. La programación necesita en ocasiones que repitamos acciones sucesivas o la elección de una determinada secuencia y no de otra dependiendo de las condiciones específicas de la ejecución. Por ejemplo, podríamos hacer alusión a un script que ejecute una secuencia diferente en función del día de la semana en el que nos encontramos. Este tipo de acciones pueden ser llevadas a cabo gracias a un conjunto de instrucciones presentes en la mayoría de los lenguajes.


24

Las condiciones if. La estructura de base de este tipo de instrucciones es la siguiente: if (condición) { Instrucción 1; Instrucción 2; ... } else { Instrucción A; Instrucción B; ... } Haciendo la traza del código vemos como el programa verificará el cumplimiento o no de la condición. Si la condición es cierta las instrucciones 1 y 2 serán ejecutadas. De lo contrario (else), las instrucciones A y B serán llevadas a cabo. Esta estructura de base puede complicarse un poco más planteando nuevas condiciones dentro de la condición principal. Estamos ante las llamadas condiciones anidadas que tendrían una estructura del siguiente tipo: if (condición1) { Instrucción 1; Instrucción 2; ... } else { if (condición2) { Instrucción A; Instrucción B; ... } else { Instrucción X ... } } De este modo podríamos introducir tantas condiciones como queramos dentro de una condición principal.


25

Por ejemplo, el siguiente diagrama de flujo contiene dos estructuras condicionales,

Bucles. Estas instrucciones de bucles nos permiten realizar una tarea incluida dentro del bucle un cierto número de veces definido por nosotros mismos. La estructura más utilizada y la más sencilla es while. La usamos para ejecutar las instrucciones contenidas en su interior siempre y cuando la condición definida sea verdadera. La estructura sintáctica es la siguiente:

Un ejemplo sencillo es este bucle que aumenta el tamaño de la fuente en una unidad a cada nueva vuelta por el bucle,

Lo primero siempre es definir el valor de la variable que vamos a evaluar en la condición. En este caso le hemos atribuido un valor de 1 que corresponde a la letra más pequeña. El paso siguiente es crear el bucle en el que imponemos la condición que la variable no exceda el valor de 6. La instrucción a ejecutar será imprimir en nuestro documento un código HTML en el que la etiqueta FONT y el mensaje que contiene varían a medida que $size cambia su valor.


26

Hay una variante de while que evalúa la condición al final con lo que, incluso siendo falsa desde el principio, éste se ejecuta al menos una vez.

Subprogramas: procedimientos y funciones. Librerías.

Procedimientos. Siguiendo una de las técnicas primeras de la programación, divide y vencerás, un camino para dividir un gran programa en partes más pequeñas es el uso de los llamados procedimientos que son módulos de un programa que realiza tareas específicas y que no puede devolver valores al programa principal u a otro procedimiento que lo esté invocando. Después de escribir un procedimiento se usara su propio nombre como una sola instrucción o llamada al procedimiento. En PHP los procedimientos se pueden escribir después del cuerpo principal del programa utilizando el formato function NomProc{instrucciones;}; En realidad PHP no tiene procedimientos como tales, son funciones que no devuelven ningún valor.

Funciones. El uso de funciones en nuestro programa permitirá que sea más legible y eficaz. Por ejemplo, usar comprobarEstadoYMostrar puede resultar mucho más legible que una serie de 10 órdenes manejando varias variables... Dentro del propio desarrollo de la aplicación el uso de funciones permitiría distribuir las tareas de forma más eficaz puesto que cada miembro del equipo puede encargarse de desarrollar una parte. En PHP, el formato general para definir una función será este: function nombre_de_función (parametro1, parametro2...) { orden1; orden2; orden3; ... return resultado; } Si parametro1, parametro2 y resultado fueran variables deberían empezar con el símbolo $.


27

Por ejemplo, podríamos crear una función para generar un número al azar entre dos números dados (funcs2.php). <HTML> <BODY> <?php function azarEntre($desde, $hasta) { srand(time()); $cantidadCifras = $hasta - $desde + 1; $numAzar = (rand() % ($cantidadCifras)) + $desde; return $numAzar; } echo "Un numero al azar entre 1 y 10: ", azarEntre(1, 10), "<BR>"; echo "Otro entre 5 y 7: ", azarEntre(5, 7), "<br>"; echo "y otro entre 100 y 200: ", azarEntre(100, 200), "<BR>"; ?> </BODY> </HTML> Si quisiéramos modificar el valor de un parámetro, deberíamos colocar delante el símbolo "&" (es lo que se conoce como "pasar el parámetro por referencia"; lo opuesto es "pasar el parámetro por valor"), <HTML> <BODY> Bienvenido!<br> <?php function modifica (&$variable) { $variable++; } $a=5; printf("a vale %d <br>", $a); modifica ($a); printf("Ahora a vale %d <br>", $a); /* Ahora $a vale 6 */ ?> </BODY> </HTML> Muy usado esta variante cuando una función debe devolver más de un valor.

Librerías. El uso de librerías es muy útil ya que nos permiten agrupar varias funciones y variables en un mismo fichero. Así podremos incluir esta librería en distintas páginas y disponer de esas funciones fácilmente.


28

Por ejemplo, vamos a crear 2 páginas que usan la librería definida anteriormente para conseguir que las dos páginas tengan la misma cabecera y pie de página.

La instrucción para incluir una librería en nuestra página es include ("nombre de librería").

Tipos de parámetros. En PHP un parámetro es una variable que puede pasar su valor a un procedimiento desde el principal o desde otro procedimiento. Existen ocasiones en que es necesario mandar al procedimiento ciertos valores para que los use en algún proceso. La sintaxis es la siguiente: Function nomproc($par1,$par2..){ cuerpo de instrucciones; } Cuando se invoque un procedimiento y se quiera pasar parámetros solo debemos ponerlos dentro de un paréntesis.


29

Por ejemplo, proc50( $alfa, 3.1416, 'juan'); como parámetros se pueden mandar variables, datos o expresiones algebraicas. Reglas para el uso de parámetros: Cuando se usan variables como parámetros la variable que se manda debe ser declarada dentro del principal o del procedimiento de donde se está enviando. La variable que se manda tiene un nombre la que se recibe puede tener otro nombre. La cantidad de variables que se envían deben ser iguales en cantidad, orden y tipo a las variables que reciben. La variable que se recibe tiene un ámbito local dentro del procedimiento, es decir solo la puede usar ese procedimiento. Llamadas a funciones. Recursividad. Las funciones recursivas no son más que simples funciones con la particularidad de que se llaman a sí mismas hasta que llega a un corte que daremos desde la lógica de la función. Siempre debe existir esa posibilidad puesto que de lo contrario entraríamos en un bucle infinito que puede llegar a bloquear las capacidades de los dispositivos. Una mala decisión en el corte o un error en la lógica puede que la función se llame siempre así misma y nunca pare. Por ejemplo si quisiéramos mostrar todos los números comprendidos entre 10 y 20, podríamos hacerlo con un bucle o usando una función recursiva,

cuyo resultado en pantalla sería,


30

Nociones de orientación a objetos: clases y objetos. Herencia. Una clase es una colección de variables y de funciones que acceden a esas variables. Las clases son tipos, es decir, son plantillas para variables donde se crean variables del tipo deseado con el operador new. Las clases extendidas o derivadas tienen todas las variables y funciones de la clase base y lo que les añadas al extender la definición. En el caso del lenguaje PHP la herencia múltiple no está soportada. Por ejemplo, si definimos una clase llamada Cart que consiste en un array o matriz asociativa de artículos en el carro y dos funciones para meter y sacar elementos del carro. En este caso definimos un objeto $cart de clase Cart. La función add_item() de ese objeto se llama para añadir un item del artículo número 10 al carro.

Este otro ejemplo define una clase Named_Cart que tiene todas las variables y funciones de Cart, y además añade la variable $owner y una función adicional set_owner().


31

Un carro con nombre se crea de la forma habitual y, una vez hecho, puede acceder al propietario del carro.

Entre funciones de una clase, la variable $this hace referencia al propio objeto. Debe usarse $this->loquesea para acceder a una variable o función llamada del objeto actual. Los constructores son funciones de una clase que se llaman automáticamente al crear una nueva instancia (objeto) de una clase. Una función se convierte en constructor cuando tiene el mismo nombre que la clase. El siguiente ejemplo define una clase Auto_Cart que es un Cart junto con un constructor que inicializa el carro con un item del tipo de artículo "10" cada vez que se crea un nuevo Auto_Cart con "new".

Los constructores también pueden recibir parámetros y estos parámetros pueden ser opcionales, lo que los hace más útiles.

La herencia. La herencia es un principio de programación bien establecido y PHP hace uso de él en su modelado de objetos. Este principio afectará la manera en que muchas clases y objetos se relacionan unas con otras. Por ejemplo, cuando se extiende una clase, la subclase hereda todos los métodos públicos y protegidos de la clase padre. A menos que una clase sobrescriba esos métodos, mantendrán su funcionalidad original. Esto es útil para la definición y abstracción de la funcionalidad y permite la implementación de funcionalidad adicional en objetos similares sin la necesidad de implantar de nuevo toda la funcionalidad compartida.


32

Principales metodologías de programación. - Programación estructurada (PE). Este tipo de programación utiliza un número limitado de estructuras de controle incorpora algunos elementos básicos y fundamentales en todo tipo de desarrollo software:

Diseño descendente (top-dow): el problema se descompone en etapas o estructuras jerárquicas.

Recursos abstractos (simplicidad): consiste en descompones las acciones complejas en otras más simples capaces de ser resueltas con mayor facilidad.

Estructuras básicas: existen tres tipos de estructuras básicas conocidas como secuenciales (cada acción sigue a otra acción secuencialmente), selectivas (se evalúan condiciones y según el resultado se realizan unas u otras acciones) y repetitivas (las instrucciones que se repiten un número determinado de veces).

Las principales ventajas de la programación estructurada son:

Los programas son más fáciles de entender.

Se reduce la complejidad de las pruebas.

Aumenta la productividad del programador.

Los programas queden mejor documentados internamente.

Todos los programas estructurados tienen un comienzo y un final bien definido. - Programación modular. Este tipo de programación consta de varias secciones dividas de forma que interactúan a través de llamadas a procedimientos, que integran el programa en su totalidad. El programa principal coordina las llamadas a los módulos secundarios y pasa los datos necesarios en forma de parámetros. A su vez cada módulo puede contener sus propios datos y llamar a otros módulos o funciones. - Programación orientada a objetos (POO). Se trata de una técnica que aumenta considerablemente la velocidad de desarrollo de los programas gracias a la reutilización de los objetos. El elemento principal de la programación orientada a objetos es el objeto que es un conjunto complejo de datos y programas que poseen estructura y forman parte de una organización. NOTA: Un objeto contiene varios datos bien estructurados y pueden ser visibles o no dependiendo del programador y las acciones del programa en ese momento. El polimorfismo y la herencia son unas de sus principales características. - Programación concurrente. Este tipo de programación se utiliza cuando tenemos que realizar varias acciones a la vez porque permite controlar los accesos de usuarios y programas a un recurso de forma simultánea. Se trata de una programación más lenta y laboriosa, obteniendo unos resultados lentos en las acciones. - Programación funcional. Se caracteriza principalmente por permitir declarar y llamar a funciones dentro de otras funciones. - Programación lógica. Se suele utilizar en la inteligencia artificial y pequeños programas infantiles. Se trata de una programación basada en el cálculo de predicados (una teoría matemática que permite lograr que un ordenador basándose en hecho y reglas lógicas, pueda dar soluciones inteligentes).


33

3.2. Lenguajes para el desarrollo de contenido dinámico Lenguajes de guión. Características generales. Un script es un programa que puede acompañar un documento HTML o estar contenido en su interior. Las instrucciones del programa se ejecutan cuando se carga el documento, o cuando se produce alguna circunstancia tal como la activación de un enlace por parte del usuario. Este segundo tipo de acciones, desencadenan lo que se conocen como eventos. Con la introducción de scripts podemos ampliar las posibilidades de las aplicaciones web:

Generación dinámica del documento en el momento de la carga.

Validación de datos introducidos en un formulario, así como el rellenado automático de aquellos controles del mismo que lo precisen.

Controlar los eventos que se producen en la página: Un elemento toma el foco, un elemento es activado con el ratón, etc.

Podemos distinguir dos tipos de scripts dentro de un documento HTML:

El primero es el que se ejecuta durante la descarga de la página en el navegador.

El segundo tipo son los ejecutados cada vez que un usuario (o el navegador) genera lo que se llama un "evento".

Por ejemplo la pulsación de un botón en un formulario. Los lenguajes de script más conocidos son:

VBScript: Implementación de Visual Basic para crear aplicaciones para Internet Explorer.

JScript: Implementación de Microsoft del lenguaje de scripting basado en Java.

JavaScript: Lenguaje de elaboración de scripts para incrustarse en archivos HTML. Es el lenguaje de script más usado en Internet.

ActionScript: Lenguaje de script de Macromedia para la aplicación Flash.

ECMAScript : Lenguaje de scripting que soporta el estándar ECMA -262. Aunque no tienen las mismas características que los lenguajes de altas prestaciones orientados a objetos, como puede ser C++, los lenguajes de guiones cumplen muy bien su cometido en el medio para el que se han creado (Internet). Comparativa de lenguajes de guión. Criterios para la selección de un lenguaje de guión. Las principales tecnologías de lenguaje de guión del lado del servidor son: - ASP (Active Server Pages), también conocido como ASP clásico, es una tecnología de Microsoft del tipo "lado del servidor" para páginas web generadas dinámicamente, que ha sido comercializada como un anexo a Internet Information Services (IIS). Lo interesante de este modelo tecnológico es poder utilizar diversos componentes ya desarrollados como algunos controles ActiveX así como componentes del lado del servidor. JSP (Java Server Pages), es una tecnología que ayuda a los desarrolladores de software a crear páginas web dinámicas basadas en HTML y XML, entre otros tipos de documentos.


34

- JSP es similar a PHP, pero usa el lenguaje de programación Java. Para ejecutar (o correr) JavaServer Pages, se requiere un servidor web compatible con contenedores servlet como Apache Tomcat o Jetty. - PHP (Hypertext Pre-Processor, es un lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en el documento HTML en lugar de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera la página Web resultante. PHP ha evolucionado por lo que ahora incluye también una interfaz de línea de comandos que puede ser usada en aplicaciones gráficas independientes. Puede ser usado en la mayoría de los servidores web al igual que en casi todos los sistemas operativos y plataformas sin ningún costo. Se considera uno de los lenguajes más flexibles, potentes y de alto rendimiento conocidos hasta el día de hoy. Máquinas virtuales en navegadores. Miniaplicaciones (applets). Podamos crear, acceder y modificar las máquinas virtuales dentro de cualquier navegador web de manera que podamos compartirla con cualquiera que tenga un navegador sin tener que instalar un software especial. De esta forma un desarrollador podría probar cómo funciona una aplicación multiplataforma en diversos entornos. Es el caso de StackVM que puede ejecutar (correr) máquinas virtuales en cualquier navegador web. Está escrita completamente en Javascript.

- Applets o miniaplicaciones. Un applet es un componente de una aplicación que se ejecuta en el contexto de otro programa como puede ser un navegador web.


35

Un applet debe ejecutarse en un contenedor, que le proporciona un programa anfitrión, mediante un plugin o en aplicaciones como teléfonos móviles que soportan el modelo de programación por applets. Por ejemplo, un applet de Java, explicando cómo medir con un micrómetro.

Otros lenguajes para el desarrollo de aplicaciones web enriquecidas (RIA). Una RIA es una tecnología para crear interfaces de aplicaciones ricas para Internet (Rich Internet Application) permitiendo interactuar con datos en un servidor y además actualizar las interfaces (pantallas, formularios, etc.) sin tener que redibujar todo nuevamente. Los hace muy atractivos el hecho de que incorporan nuevos elementos de interfaz que permiten una experiencia de usuario muy agradable y usable, añadiendo propiedades multimedia (imágenes, vídeo, sonido...).

Ajax. El código Ajax se integra perfectamente con el código HTML y CSS de las páginas web pudiendo, incluso incrustar otros elementos como películas Flash. El código no se compila si no que el navegador lo analiza, lo interpreta y lo ejecuta. Para muchos desarrolladores esta cuestión ralentiza un poco todo el proceso. Existen frameworks disponibles que facilitan esta tarea, tales como MooTools, Dojo, ExtJS, JQuery o Prototype y también hay extensiones de eClipse para desarrollar en Ajax que facilitan su implantación. Tiene una fuerte comunidad detrás que apoya este estándar abierto y universal.


36

Adobe Flex. Este plugin de Flash está instalado en cerca de un 95% de los navegadores, y al ser un lenguaje compilado (en lugar de interpretado, como Ajax) la ejecución es mucho más rápida, optimizando más los tiempos de la CPU y del navegador. Este lenguaje no es tan universal como Ajax, y por ello, el número de desarrolladores es mucho menor. Adobe Flex está muy orientado al diseño, proporcionando herramientas profesionales para crear interfaces de usuario espectaculares y cuidadas. Esta plataforma está especialmente indicada para desarrollos multimedia, debido a sus capacidades de reproducción de vídeo, de música o de animaciones 2D y 3D. Otro problema añadido a la tecnología Flash es que al estar todo encapsulado en un archivo SWF, y compilado, no hay elementos visibles en la página para que los buscadores puedan indexar.


37

4. LENGUAJES DE GUIÓN DE USO GENERAL Un script es un programa que puede acompañar un documento HTML o estar contenido en su interior. Las instrucciones del programa se ejecutan cuando se carga el documento, o cuando se produce alguna circunstancia tal como la activación de un enlace por parte del usuario. Este segundo tipo de acciones, desencadenan lo que se conocen como eventos. El caso más paradigmático es el de JavaScript que es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas, que son sitios webs que incorporan efectos como texto que aparece y desaparece, animaciones o acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

4.1. Integración de lenguajes de guión en navegadores web Comparativa y compatibilidad con navegadores. Los desarrolladores webs deben estar al tanto de las nuevas versiones y detalles que marcan la diferencia entre navegadores que van surgiendo en Internet. Por ejemplo, hay que estar al tanto del soporte para la versión de Javascript 1.6

Los navegadores web están desarrollados por equipos de personas que intentan acatar las normas establecidas, que la W3C indica que deben cumplirse para que las páginas web se vean tal y como se ven. Evidentemente, cada equipo tiene una visión de las normas y cada visión da como resultado una implementación. Por lo tanto cada equipo de desarrollo obtiene una implementación diferente de una misma norma.


38

Aunque actualmente Microsoft (creadores de Internet Explorer) están siendo conscientes de la importancia de actualizar de forma más asidua y alinearse del lado de los estándares que ofrece la W3C, tradicionalmente no han mostrado interés por incorporarse al avance colaborativo que la nueva versión HTML5 viene ofreciendo. Sin embargo, los navegadores Mozilla Firefox y Opera están constantemente implementando nuevas funcionalidades a modo de propuestas, para que la W3C piense en si deberían incluirlas dentro de las normas que definen ese estándar. Es evidente que cada navegador es una aplicación por separado y que la especificación sirve de guía para que estas aplicaciones vayan sobre un mismo camino. Para algunos autores esto permite que varias aplicaciones tengan implementaciones muy diferentes, lo que obliga a los desarrolladores a crear configuraciones adicionales para obtener un resultado similar en todos los navegadores. NOTA: Respecto a la idea comentada anteriormente sobre crear diseños diferentes para cada uno de los navegadores más usado, actualmente existe la tendencia que va ganando peso entre los desarrolladores de hacer un código común y único, siempre muy cercano al estándar de la W3C. Diferencias entre versiones.

Javascript 1: nació con el Netscape 2.0 y soportaba gran cantidad de instrucciones y funciones, casi todas las que existen ahora ya se introdujeron en el primer estándar.

Javascript 1.1: Es la versión de Javascript que se diseñó con la llegada de los navegadores 3.0. Implementaba poco más que su anterior versión, como por ejemplo el tratamiento de imágenes dinámicamente y la creación de arrays.

Javascript 1.2: La versión de los navegadores 4.0. Esta tiene como desventaja que es un poco distinta en plataformas Microsoft y Netscape, ya que ambos navegadores crecieron de distinto modo y estaban en plena lucha por el mercado.

Javascript 1.3: Versión que implementan los navegadores 5.0. En esta versión se han limado algunas diferencias y asperezas entre los dos navegadores.

Javascript 1.5: Versión que implementa Netscape 6. A medida que se van mejorando los navegadores y van saliendo versiones de HTML surgen nuevas necesidades para programación de elementos dinámicos.

4.2. Estructura general de un programa en un lenguaje de guión Variables y tipos de datos. Numéricas. Se utilizan para almacenar valores numéricos enteros (integer, en inglés) o decimales (float, en inglés). El valor se asigna indicando directamente el número entero o decimal.


39

Por ejemplo, var iva = 16; // variable tipo entero var total = 234.65; // variable tipo decimal Cadenas de texto. Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor se encierra el valor entre comillas dobles o simples. Por ejemplo, var mensaje2 = "Como mola la gramola"; var producto = 'Producto sin igual; var letrapulsada = 'h'; Existen otros caracteres que son difíciles de incluir en una variable de texto (tabulador, ENTER, etc.). JavaScript define un mecanismo para incluir de forma sencilla caracteres especiales y problemáticos dentro de una cadena de texto sustituyendo el carácter problemático por una combinación simple de caracteres. Este mecanismo de JavaScript se denomina "mecanismo de escape" de los caracteres problemáticos. La siguiente tabla recoge estas posibilidades,

Si se quiere incluir... Se debe incluir...

Una nueva línea \n

Un tabulador \t

Una comilla simple \'

Una comilla doble \"

Una barra inclinada \\

Por ejemplo, var texto1 = 'Una frase con \'comillas simples\' dentro'; var texto2 = "Una frase con \"comillas dobles\" dentro"; Arrays. Se trata de una forma de agrupar variables que están vinculadas entre sí. Pueden ser todas del mismo tipo o cada una de un tipo diferente. Veamos un ejemplo sencillo, si una aplicación necesita manejar los días de la semana, se podrían crear siete variables de tipo texto: var dia1 = "Lunes"; var dia2 = "Martes"; ... var dia7 = "Domingo";


40

Aunque el código anterior no es incorrecto, sí que es poco eficiente y complica en exceso la programación. Si en vez de los días de la semana se tuviera que guardar el nombre de los meses del año, el nombre de todos los países del mundo o las mediciones diarias de temperatura de los últimos 100 años, se tendrían que crear decenas o cientos de variables. La solución eficaz es agrupar todas las variables relacionadas en una colección de variables o array de la siguiente forma: var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"]; Una vez definido un array, es muy sencillo acceder a cada uno de sus elementos. Cada elemento se accede indicando su posición dentro del array. La única complicación, que es responsable de muchos errores cuando se empieza a programar, es que las posiciones de los elementos empiezan a contarse en el 0 y no en el 1. Por ejemplo, var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes" var otroDia = dias[5]; // otroDia = "Sábado" El valor dias[5] hace referencia al elemento que ocupa la sexta posición dentro del array días. Como las posiciones empiezan a contarse en 0, la posición 5 hace referencia al sexto elemento, en este caso, el valor sábado. Booleanos. Una variable de tipo booleano almacena un tipo especial de valor que solamente puede tomar dos valores, true (verdadero) o false (falso). Por ejemplo, var registrado = false; var ivaIncluido = true; Operadores Hay dos tipos de operadores, los binarios (necesitan dos operandos) y los unitarios (precisan un único operando). Un operador especial es el operador de asignación cuyo signo es el igual (=). Su uso en Javascript es similar al que tiene en C y distinto del que posee en matemáticas porque sirve para asignar un valor y no a establecer relaciones de igualdad ya que ese es otro operador (= =). Los operadores de incremento y disminución son los siguientes,


41

Estos operadores unitarios matemáticos pueden colocarse antes (prefijos) o después (sufijos) del operando y su valor varía según esta posición, ya que el operador prefijo modifica el operando antes de utilizar su valor, mientras el operador sufijo modifica el operando después de haber utilizado el valor. Por ejemplo,

Los operadores clásicos y sus símbolos pueden verse en el siguiente esquema:

Los operadores relacionales son los siguientes:

Los operadores relacionales producen un resultado 1 (true) si la relación es verdadera, y 0 (false) si no lo es. Los operadores lógicos son muy parecidos a los relacionales, en el sentido de que dan también como salida sólo dos valores que, en este caso, son 0 si la expresión lógica es verdadera y 1 si es falsa.


42

Los operadores lógicos son (el NOT es un operador unitario) los siguientes:

La negación (!) equivale al complemento a uno (~). Los operadores &, | valoran ambos lados del argumento y deciden el resultado. Los operadores && y || pueden emplearse para evitar la valoración de los operandos de la derecha si la valoración es necesaria. Las tablas de verdad correspondientes son las siguientes:

Los operadores sobre cadenas son los siguientes:

Objetos. Los objetos de JavaScript son colecciones de propiedades y métodos. Un método es una función que es miembro de un objeto. Una propiedad es un valor o un conjunto de valores (en forma de matriz u objeto) que es miembro de un objeto. JavaScript admite cuatro tipos de objetos: objetos intrínsecos, objetos creados por el usuario, objetos hosts proporcionados por el host (como window y document en Internet Explorer) y objetos ActiveX. Para crear objetos, primero es necesario definir su tipo (o clase).


43

Por ejemplo, function empleado(nombre, edad, puesto) { this.nombre = nombre this.edad = edad this.puesto = puesto } En JavaScript, la partícula this se refiere al objeto en el que se utiliza. Una vez definida la clase, podemos crear variables (instanciar objetos) de esa clase. Por ejemplo, empleado_1 = new empleado("Pedro", 26, "Programador") Podrían añadirse propiedades a los objetos aunque estas no hayan sido declaradas en la definición de la clase. Por ejemplo, empleado_1.jefe = "Luis" Estas propiedades nuevas sólo afectaran a ese objeto y no al resto. Los objetos pueden anidarse de forma que un objeto sea una propiedad de otro objeto. Por ejemplo, function oficina(ciudad, pais) { this.ciudad = ciudad this.pais = pais } oficinaPedro = new oficina("Madrid","España") empleado_1 = new empleado("Pedro", 26, "Programador", oficinaPedro) En el ejemplo anterior, hay que definir la clase empleado de esta forma: function empleado(nombre, edad, puesto, oficina) this.nombre = nombre this.edad = edad this.puesto = puesto this.oficina = oficina }


44

Dentro de la definición de la clase o tipo del objeto, pueden incluirse funciones que accedan a sus propiedades. Estas funciones reciben el nombre de métodos. Por ejemplo, function mostrarPerfil() {

document.write("Nombre: " + this.nombre + "<BR>")

document.write("Edad: " + this.edad + "<BR>")

document.write("Puesto: " + this.puesto + "<BR>")

}

function empleado(nombre, edad, puesto) {

this.nombre = nombre

this.edad = edad

this.puesto = puesto

this.mostrarPerfil = mostrarPerfil

}

Así podrían mostrarse las propiedades del objeto empleado invocando el método asociado, empleado_1.mostrarPerfil Sentencias. Anidamiento. Es posible el anidamiento de las sentencias if siguiendo el siguiente esquema: if (expresión condicional) {

………….; }

if (expresión condicional) {

if (expresión condicional) {

…………………..;

} else {

if (expresión condicional){

…………………….;

} else {

………………………;

}

}

}


45

Estructuras de control y condicionales Las sentencias If-else pueden tomar decisiones de acuerdo a las condiciones propuestas. Una expresión condicional responde únicamente a los valores verdadero (true) o falso (false), y según el resultado de la valoración podemos decidir ejecutar un trozo de código u otro, o simplemente no hacer nada. El esquema de desarrollo sería el siguiente: if (expresión condicional) { Bloque de código } if (expresión condicional) { Bloque de código;} else { Bloque de código; } Bucles. Bucle FOR. Este tipo de bucle se utiliza para repetir unas instrucciones un determinado número de veces dependiendo del cumplimiento de una condición concreta. La sintaxis del bucle es la siguiente: for (inicialización;condición;actualización) { sentencias a ejecutar en cada iteración } Bucle WHILE. Esta estructura permite crear bucles que se ejecutan ninguna o más veces dependiendo de la condición indicada. Su definición formal es: while(condicion) { ... } NOTA: El funcionamiento del bucle WHILE podemos expresarlo diciendo "mientras se cumpla la condición indicada, repite indefinidamente las instrucciones incluidas dentro del bucle". Si la condición no se cumple ni siquiera la primera vez, el bucle no se ejecuta. Si la condición se cumple, se ejecutan las instrucciones una vez y se vuelve a comprobar la condición. Si se sigue cumpliendo la condición, se vuelve a ejecutar el bucle y así se continúa hasta que la condición no se cumpla.


46

Bucle DO-WHILE . Su definición formal es: do { ... } while(condicion); De esta forma, como la condición se comprueba después de cada repetición, la primera vez siempre se ejecutan las instrucciones del bucle. Comentarios. Van comprendidos entre barras y asteriscos (ocupando una o varias líneas) con la siguiente sintaxis: /*comentario*/ Por ejemplo,

Otro tipo de comentario es la barra doble que sólo puede usarse para comentarios de una sola línea aunque no la ocupen por entero. Por ejemplo, ent x: //comentario de una sola línea

4.3. Funciones Una función de JavaScript presenta el siguiente aspecto: function nombre_de_la_función(){ …enunciados a ejecutar… } Para ejecutar la función posteriormente no hay más que invocar su nombre en cualquier momento y desde cualquier parte de un código, con una excepción: la función debe haber sido definida anteriormente. Por ejemplo, este código: function dame_una_a(){ alert("¡AAAAAAAAAAAAAAAAA!"); }


47

dame_una_a(); ejecutaría la alerta, pero éste: dame_una_a(); function dame_una_a(){ alert("¡AAAAAAAAAAAAAAAAA!"); } Generaría un error, porque en el momento en que se invoca la función ésta aún no ha sido registrada. Hay que poner especial atención a la hora de crear las funciones, para no repetir los nombres, principalmente porque esto no genera errores en JavaScript. Por ejemplo, si definimos dos funciones con el mismo nombre, function alerta(){ alert("Hola"); } function alerta(){ alert("Adiós"); } alerta(); sólo funciona la segunda, que ha sido la última definida. Parámetros. Las funciones realizan operaciones trabajando con unos datos fijos si deseamos que esos datos varíen en función del contexto y de los valores que necesitamos en cada momento debemos usar parámetros o argumentos. function nombre_de_la_función(argumento1,argumento1,…){ …enunciados a ejecutar… } Los argumentos o parámetros se nombran como las variables.


48

Por ejemplo, function sumar(x,y){ var total = x + y; alert(total); } Si hacemos unas llamadas a la función con argumentos concretos, sumar(1,2); sumar(3,5); sumar(8,13); la función sumar adquiere sucesivamente los valores de 3, 8 y 21, que es lo que mostrarían por pantalla. En el caso de que los argumentos sean cadenas de textos deben ir entre comillas siguiendo la siguiente sintaxis, la_función('cadena','otra_cadena'); Variables locales y globales. Denominamos ámbito de las variables al lugar donde estas están disponibles. Por lo general, cuando declaramos una variable hacemos que esté disponible en el lugar donde se ha declarado, esto ocurre en todos los lenguajes de programación y como Javascript se define dentro de una página web, las variables que declaremos en la página estarán accesibles dentro de ella. Variables globales. Este tipo de variables son las que están declaradas en el ámbito más amplio posible, que en Javascript es una página web. Para declarar una variable global a la página simplemente lo haremos en un script, con la palabra var. <SCRIPT> var variableGlobal </SCRIPT> Variables locales. Son las que se declaran en lugares más acotados, como por ejemplo una función. Sólo podremos acceder a ellas dentro del lugar donde se ha declarado, es decir, si la habíamos declarado en una función solo podremos acceder a ella cuando estemos en esa función. También podrían ser locales a otros ámbitos, como por ejemplo un bucle.


49

Por ejemplo, <SCRIPT> function miFuncion (){ var local1; } </SCRIPT> Se han utilizan las llaves para acotar el lugar donde está definida esa función o su ámbito. Es posible declarar una variable local con el mismo nombre que una global pero hay que tener en cuenta que la variable global será visible en toda la página excepto en el ámbito donde está declarada la variable local ya que en este sitio ese nombre de variable está ocupado por la local y es ella quien tiene sentido. Por ejemplo, <SCRIPT> var numero = 2 function miFuncion (){ var numero = 19 document.write(numero) //imprime 19 } document.write(numero) //imprime 2 </SCRIPT> Bibliotecas de funciones. Las librerías de los lenguajes de programación ahorran la tarea de escribir las funciones comunes que por lo general pueden necesitar los programadores. Todos los lenguajes de programación tienen, creadas por la comunidad de desarrolladores, una gran cantidad de ellas agrupadas en lo que denominamos bibliotecas. Por ejemplo, las funciones matemáticas o las de manejo de cadenas (strings) se implementan mediante los objetos Math y String. Sin embargo, existen algunas funciones que no están asociadas a ningún objeto y son las que veremos en este capítulo, ya que todavía no conocemos los objetos y no los necesitaremos para estudiarlas.


50

Son muchas las funciones que Javascript pone a disposición de los programadores. Estas son algunas:

eval(string). Esta función recibe una cadena de caracteres y la ejecuta como si fuera una

sentencia de Javascript.

parseInt(cadena,base). Recibe una cadena y una base. Devuelve un valor numérico

resultante de convertir la cadena en un número en la base indicada.

parseFloat(cadena). Convierte la cadena en un número y lo devuelve.

escape (carácter). La función escape retorna la codificación hexadecimal de un argumento

que se encuentra en los caracteres ISO.

unescape(carácter). Hace lo opuesto a la función escape.

isNaN(número). Devuelve un booleano dependiendo de lo que recibe por parámetro. Si no es

un número devuelve un true, si es un número devuelve false.

4.4. Manipulación de texto Funciones básica para la manipulación de texto. Los objetos tienen propiedades y algunas de ellas pueden ser cadenas de caracteres sobre los que se pueden realizar funciones para obtener nuevos resultados. La clase String sólo tiene una propiedad, length, que guarda el número de caracteres del String pero tiene varios métodos muy usados:

charAt(índice). Devuelve el carácter que hay en la posición indicada como índice. Las

posiciones de un string empiezan en 0.

indexOf (carácter, desde). Si no encuentra el carácter en el string devuelve -1. El segundo

parámetro es opcional y sirve para indicar a partir de qué posición se desea que empiece la

búsqueda.

lastIndexOf(carácter, desde). Busca la posición de un carácter exactamente igual a como lo

hace la - función indexOf pero desde el final en lugar del principio. El segundo parámetro

indica el número de caracteres desde donde se busca, igual que en indexOf.

replace(substring_a_buscar, nuevoStr). Sirve para reemplazar trozos del texto de un string

por otro texto, por ejemplo, podríamos utilizarlo para reemplazar todas las apariciones del

substring "xxx" por "yyy". El método no reemplaza en el string, sino que devuelve un

resultante de hacer ese reemplazo. Acepta expresiones regulares en el substring a buscar.

substring (inicio, fin). Si intercambiamos los parámetros de inicio y fin también funciona.

Simplemente nos da el substring que hay entre el carácter menor y el mayor.

toLowerCase(). Pone todos los caracteres de un string en minúsculas.

toUpperCase(). Pone todos los caracteres de un string en mayúsculas.

toString(). Este método lo tienen todos los objetos y se usa para convertirlos en cadenas.


51

Introducción y validación de texto. Una de las principales utilidades de JavaScript (ahora menos con la aparición del potente HTML5) es el control de los formularios en la validación de los datos introducidos por los usuarios. Antes de enviar un formulario al servidor se validaban los datos mediante JavaScript para avisar al usuario de posibles errores al teclear y evitar almacenar datos sin sentido. Normalmente, la validación de un formulario consiste en llamar a una función de validación cuando el usuario hace clic sobre el botón de envío del formulario. En esta función, se comprueban si los valores que ha introducido el usuario cumplen las restricciones impuestas por la aplicación. Aunque existen tantas posibles comprobaciones como elementos de formulario diferentes, algunas comprobaciones son muy habituales:

que se rellene un campo obligatorio.

que se seleccione el valor de una lista desplegable.

que la dirección de email indicada sea correcta, que la fecha introducida sea lógica.

que se haya introducido un número donde así se requiere.

Por ejemplo,

La técnica de validación se basa en el comportamiento del evento onsubmit de JavaScript.


52

Al igual que sucede con otros eventos como onclick y onkeypress, el evento onsubmit varía su comportamiento en función del valor que se devuelve. Nos devolverá el valor true si el formulario se envía sin problemas y el valor false si el formulario no se envía. La clave de esta técnica consiste en comprobar todos y cada uno de los elementos del formulario. En cuando se encuentra un elemento incorrecto, se devuelve el valor false. Si no se encuentra ningún error, se devuelve el valor true. Es por eso que en la primera línea del ejemplo hemos introducido, onsubmit="return validacion()" Como el código JavaScript devuelve el valor resultante de la función validacion(), el formulario solamente se enviará al servidor si esa función devuelve true. En el caso de que la función validacion() devuelva false, el formulario permanecerá sin enviarse. Dentro de la función validacion() se comprueban todas las condiciones impuestas por la aplicación. Cuando no se cumple una condición, se devuelve false y por tanto el formulario no se envía. Si se llega al final de la función, todas las condiciones se han cumplido correctamente, por lo que se devuelve true y el formulario se envía. Una vez definido el esquema de la función validacion(), se debe añadir a esta función el código correspondiente a todas las comprobaciones que se realizan sobre los elementos del formulario. Por ejemplo,

4.5. Listas (arrays) Creación de arrays básicos. En los lenguajes de programación existen estructuras de datos especiales para guardar información compleja. Una estructura típica en todos los lenguajes es el array que permite introducir varios valores en lugar de solamente uno como ocurre con las variables normales. Para crear un objeto Javascript ya implementado en el navegador haremos lo siguiente var miArray = new Array() Esto crea un array en la página que está ejecutándose. El array se crea sin ningún contenido. También podemos crear el array Javascript especificando el número de compartimentos que va a tener. Por ejemplo, var miArray = new Array(10) En este caso indicamos que el array va a tener 10 posiciones, es decir, 10 casillas donde guardar datos.


53

Es importante tener en cuenta que la palabra Array se escribe con la primera letra en mayúscula. Como en Javascript las mayúsculas y minúsculas sí que importan, si lo escribimos en minúscula no funcionará. Algunos ejemplos de asignación de valores en un array, miArray[0] = 290

miArray[1] = 97

miArray[2] = 127

Se introducen indicando entre corchetes el índice de la posición donde queríamos guardar el dato. En este caso introducimos 290 en la posición 0, 97 en la posición 1 y 127 en la 2. Los arrays en Javascript empiezan siempre en la posición 0, así que un array que tenga por ejemplo 10 posiciones, tendrá casillas de la 0 a la 9. Para recoger datos de un array debemos poner entre corchetes el índice de la posición a la que queremos acceder. var miArray = new Array(3). Por ejemplo, miArray[0] = 155

miArray[1] = 4

miArray[2] = 499

for (i=0;i<3;i++){

document.write("Posición " + i + " del array: " + miArray[i])

document.write("<BR>")

}

Arrays multidimensionales. Los arrays almacenan valores en una dimensión, por eso para acceder a las posiciones utilizamos tan solo un índice. Los arrays de 2 dimensiones guardan sus valores en filas y columnas y se necesitan dos índices para acceder a cada una de sus posiciones. Por ejemplo, var temperaturas_medias_ciudad0 = new Array(3)

temperaturas_medias_ciudad0[0] = 12



var temperaturas_medias_ciudad1 = new Array (3)




var temperaturas_medias_ciudad2 = new Array (3)





54

Hemos creado tres arrays de 1 dimensión y tres elementos, como los que ya conocíamos. Ahora crearemos un nuevo array de tres elementos e introduciremos dentro de cada una de sus casillas los arrays creados anteriormente, con lo que tendremos un array de arrays, es decir, un array de 2 dimensiones. var temperaturas_cuidades = new Array (3)

temperaturas_cuidades[0] = temperaturas_medias_ciudad0



El array temperaturas_cuidades es nuestro array bidimensional. También es interesante ver cómo se realiza un recorrido por un array de dos dimensiones. Para ello tenemos que hacer un bucle que pase por cada una de las casillas del array bidimensional y dentro de éstas hacer un nuevo recorrido para cada una de sus casillas internas. Es decir, un recorrido por un array dentro de otro. El método para hacer un recorrido dentro de otro es colocar un bucle dentro de otro, lo que se llama un bucle anidado. En el siguiente ejemplo vamos a meter un bucle FOR dentro de otro. Además, vamos a escribir los resultados en una tabla. document.write("<TABLE width=200 border=1 cellpadding=1 cellspacing=1>");

for (i=0;i<temperaturas_cuidades.length;i++){

document.write("<TR>")

document.write("<TD>Ciudad " + i + "</TD>")

for (j=0;j<temperaturas_cuidades[i].length;j++){

document.write("<TD>" + temperaturas_cuidades[i][j] + "</TD>")

}

document.write("</TR>")

}

document.write("</TABLE>")

La primera acción consiste en escribir la cabecera de la tabla, es decir, la etiqueta <TABLE> junto con sus atributos. Con el primer bucle realizamos un recorrido a la primera dimensión del array y utilizamos la variable i para llevar la cuenta de la posición actual. Por cada iteración de este bucle escribimos una fila y para empezar la fila abrimos la etiqueta <TR>. Además, escribimos en una casilla el número de la ciudad que estamos recorriendo en ese momento. Posteriormente ponemos otro bucle que va recorriendo cada una de las casillas del array en su segunda dimensión y escribimos la temperatura de la ciudad actual en cada uno de los meses, dentro de su etiqueta <TD>. Una vez que acaba el segundo bucle se han impreso las tres temperaturas y por lo tanto la fila está terminada. El primer bucle continúa repitiéndose hasta que todas las ciudades están impresas y una vez terminado cerramos la tabla.


55

Inicialización de arrays. Podemos inicializar los valores del array a la vez que lo declaramos. Por ejemplo, var diasSemana = new Array("Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo") El array se crea con 7 casillas, de la 0 a la 6 y en cada casilla se escribe el día de la semana correspondiente (Entre comillas porque es un texto). Tratamiento de arrays mediante bucles. Vamos a recorrer un array en Javascript para poder listar los elementos que contiene. Lo primero será definir el array.... var a=[1,2,3,4,5,6,7,8,9,10]; Para poder recorrer el array vamos a utilizar una bucle iterativo de tipo FOR. Para poder crear el bucle iterativo FOR necesitamos poner un límite de las iteraciones a ejecutar. Dicho límite nos lo dará el tamaño del array. El tamaño del array lo podemos obtener mediante la propiedad .length del array. Así nuestro bucle for quedará de la siguiente forma: for (x=0;x<a.length;x++){...} Hemos declarado una variable x, la cual incrementamos uno a uno en cada vuelta del bucle, mientras su valor es menor que el tamaño del array. El siguiente paso será coger el elemento del array que coincida con la posición determinada por X. Para obtener el elemento utilizamos los corchetes ([]) sobre el array, con la posición como parámetro de los corchetes. document.write(a[x] + " "); Ya solo nos queda introducir esto en el bucle para tener todo el código que nos permita recorrer un array en Javascript. for (x=0;x<a.length;x++){ document.write(a[x] + " "); }


56

4.6. Formatos estándar de almacenamiento de datos en lenguajes de guión Durante el desarrollo de una aplicación nos veremos obligados a almacenar información en el ordenador cliente. Estos datos sólo permanecerán en el cliente mientras el usuario no borre el historial y siempre que se conecte desde el mismo equipo. La forma más habitual de hacerlo es usando cookies pero presenta limitaciones por lo que dentro y fuera de la W3C se han desarrollado alternativas. Comparativa. Hay dos formas básicas de guardar información en el cliente: Cookies. Son pequeños ficheros de texto que se almacenan en el ordenador del cliente. Los inconvenientes de usar este método son:

El número de cookies está limitado, habitualmente una página no puede almacenar más de 20 cookies.

Las cookies se envían al servidor con cada petición. Si hay muchas podría verse afectada la velocidad de navegación por Internet.

Su manejo desde Javascript puede ser complejo porque hay que trabajar con las librerías adecuadas.

Las ventajas más destacadas son:

Amplio soporte en todos los navegadores.

Se pueden administrar desde el propio cliente y el servidor.

Almacenamiento DOM. Es una de las alternativas al uso de cookies que mejora algunas de las deficiencias del método antiguo:

Mayor almacenamiento disponible y mejor gestión del mismo. Por ejemplo, en Firefox es posible configurar el límite.

Sólo se puede acceder desde el cliente. Para manejarlo desde el servidor hay que hacerlo usando un script en el cliente que se comunique con él.

Tratamiento de formatos estándar. Veremos cómo se definen desde Javascript usando la técnica de las cookies. Cuando creamos cookies podemos indicar propiedades de los datos que nos serán útiles en el futuro inmediato de la página como puede verse en la siguiente tabla.

Nombre Nos permitirá buscarla posteriormente.

Valor Es el dato en sí mismo.

Tiempo de validez La fechas hasta la que es válida la cookies. Si no se especifica, al cerrar la sesión se borrará.

Dominio Permite indicar el dominio desde el que será accesible.

Ruta El directorio dentro del servidor desde donde es accesible.

Seguridad Nos permite indicar que sólo pueda accederse en conexiones seguras.


57

Para crear una cadena habría que definirla siguiendo una sintaxis como esta: nombre=valor;expires=fecha;path=ruta;domain=dominio;secure Realmente sólo el nombre y el valor son obligatorios, y si aparece la palabra secure sólo podremos usar las cookies en conexiones con protocolos HTTPS. Esta cadena que hemos visto se asigna a document.cookies, es decir, a la propiedad cookies del objeto document. Por ejemplo, document.cookie="nombre=Carlos;expires=Sun,6 Dec 2015 00:00:00 UTC"; Un detalle importante es que la fecha debe estar expresada en formato UTC. Para eliminar una cookie simplemente definimos la misma pero con una fecha de expiración anterior. Por ejemplo, document.cookie="nombre=Carlos;expires=Fry,4 Dec 2015 00:00:00 UTC"; Diccionarios de datos. Un diccionario de datos es un conjunto de metadatos que contiene las características lógicas y puntuales de los datos que se van a utilizar en el sistema que se está desarrollando, incluyendo datos como el nombre, una descripción general, la forma de organización, etc. Nos permiten conocer los procesos donde se emplean los datos y los sitios donde se necesita el acceso inmediato a la información. Se desarrolla durante el análisis de flujo de datos aunque su contenido también se emplea durante el propio diseño. Un diccionario de datos está compuesto por los flujos de datos, los almacenes de datos y los propios procesos, guardando los detalles y las descripciones de todos estos elementos.

4.7. Objetos Creación de objetos: métodos y estructuras de datos. Un objeto se crea a partir de una clase y la clase es la definición de las características y funcionalidades de un objeto. Con las clases no se trabaja, estas sólo son definiciones, para trabajar con una clase debemos tener un objeto instanciado de esa clase Por ejemplo, en la POO el objeto automóvil tiene una serie de propiedades como pueden ser el modelo, motor, color, etc. y puede realizarse operaciones sobre esas propiedades como cambiar el color, añadir válvulas o que cierre las puertas automáticamente cuando empiece la marcha.


58

Estos objetos interactúan unos con otros, en contraposición a la visión tradicional en la cual un programa es una colección de subrutinas (funciones o procedimientos), o simplemente una lista de instrucciones para el ordenador que es lo que llamamos programación modular o estructurada. Los objetos tienen características fundamentales que debemos conocer:

Identidad: es la propiedad que permite a un objeto diferenciarse de otros, suele dar nombre al objeto.

NOTA: En programación la identidad de los objetos es útil para comprobar si dos objetos son iguales. Hay lenguajes de programación donde la identidad de un objeto viene determinada por la dirección de memoria de la computadora en la que se encuentra el objeto.

Comportamiento: El comportamiento de un objeto está relacionado con su funcionalidad y determina las operaciones que este puede realizar o las respuestas a emitir ante mensaje de otros objetos.

La funcionalidad de un objeto está determinada, en primer lugar por su responsabilidad.

Estado: El estado de un objeto se refiere al conjunto de los valores de sus atributos en un instante de tiempo dado. El comportamiento de un objeto puede modificar el estado de este.

Cuando una operación de un objeto modifica su estado se dice que esta tiene "efecto colateral". Esto tiene especial importancia en aplicaciones que crean varias líneas de ejecución en paralelo. Si un objeto es compartido en varias situaciones simultáneas y en el transcurso de una de las operaciones se modifica el estado del objeto, es posible que se deriven errores del hecho de no controlar que el estado del objeto ha cambiado. El comportamiento de los objetos de una clase se implementa mediante funciones o métodos. Un método es un conjunto de instrucciones que realizan una determinada tarea y son similares a las funciones de los lenguajes estructurados. Del mismo modo que hay variables de instancia y de clase, también hay métodos de instancia y de clase. En el primer caso, un objeto llama a un método para realizar una determinada tarea, en el segundo, el método se llama desde la propia clase. En la programación, un objeto es una entidad provista de métodos (funciones) y atributos. Haciendo un paralelismo con la realidad, podemos decir que una persona, puede realizar diferentes acciones (funciones) como caminar, saltar, comer o dormir y tiene, naturalmente, diferentes atributos como el color de pelo, su estatura o su peso. Pero, decir “persona” es muy “abstracto” porque todos somos personas. Todos somos objetos (Carlos, Luis y Rosario, por ejemplo) y como objetos somos una clase de persona. Entonces podemos decir que una clase es un “modelo” para definir objetos que pueden realizar las mismas acciones y poseen características similares.


59

Por ejemplo, en C++, Ejemplo en C++ existe un operador llamado new. Cuando se crea un objeto mediante el operador new éste se encarga de obtener el espacio necesario para el objeto. Rectangulo rect1=new Rectangulo(10, 20, 40, 80); La referencia se guarda en la variable rect1 del tipo Rectángulo que denominamos ahora objeto. Dicha sentencia, crea un objeto denominado rect1 de la clase Rectángulo llamando al segundo constructor en el listado. El rectángulo estará situado en el punto de coordenadas x=10, y=20; tendrá una anchura de ancho=40 y una altura de alto=80 Biblioteca de objetos. Para muchos autores las bibliotecas de objetos son los recursos que una aplicación necesita para ejecutarse correctamente. Por ejemplo, en Windows un programa cuenta con un archivo con extensión .exe que es ejecutable y archivos .dll que son librerías de objetos o bibliotecas. Cuando el programa necesita algún archivo por ejemplo una imagen, es ahí donde los busca. Las bibliotecas dinámicas son archivos que contienen código objeto construido de forma independiente a su ubicación, es decir, disponibles para poder ser requeridas y cargadas en tiempo de ejecución por cualquier programa. Por esta razón deben estar disponibles como ficheros independientes al programa ejecutable.

4.8. El modelo de documento web Estructura de documento. Una característica importante y diferencial de JavaScript es que se distinguen las mayúsculas de las minúsculas. Por ejemplo, no es lo mismo MiFuncion() que mifuncion(), y si escribimos, por Document.Write() no funcionará. Todo el código deberá ir escrito entre <SCRIPT> y </SCRIPT> y como hay una variedad amplia de lenguajes de guion debemos indicar al navegador cual es el lenguaje que se va a utilizar al definir el script. Por ejemplo: <SCRIPT LANGUAGE=JavaScript> document.write("Esto ha sido escrito por JavaScript") </SCRIPT> Los scripts pueden escribirse tanto en la <HEAD> como en el <BODY> de la página aunque para trabajar un código más claro se suele incluir en la <HEAD>. Si se desea puede escribirse el código en los dos sitios a la vez.


60

Otra de las particularidades de la sintaxis de JavaScript son el uso adecuado de las llaves: { }. Es posible incluir código Javascript dentro de un archivo independiente lo que permite modificar y mantener más rápidamente la programación. El fichero que contiene el código JavaScript, normalmente tiene la extensión .js Por ejemplo, <HTML><HEAD><TITLE>Ejemplo</TITLE> <SCRIPT LANGUAGE=JavaScript src="archivo.js"></SCRIPT> </HEAD> <BODY> <FORM NAME="Formulariotipo"> <INPUT TYPE="Button" NAME="Boton" VALUE="ejemplo" onClick="mensaje()"> </FORM></BODY></HTML> El fichero archivo.js tendrá el siguiente contenido: function mensaje() { alert("Un mensaje de alerta") } Cuando se usa un archivo externo no es necesario incluir el elemento <SCRIPT>. Habitualmente en las aplicaciones profesionales suele usarse este sistema. Navegación por las propiedades de un documento. En cada ocasión que un navegador lee un fichero HTML genera interiormente lo que se conoce como el DOM (Document Object Model) y que es básicamente un árbol en el que está representada toda la información que contiene el documento: textos, enlaces, imágenes, formularios, etc. Para que el árbol sea generado correctamente, es conveniente que se haya utilizado correctamente la sintaxis de HTML y que la página que se está visualizando sea válida. Podemos acceder a los distintos nodos del árbol DOM para observar sus propiedades o incluso para modificar algunas de ellas. Podemos acceder a los diferentes nodos o elementos usando getElementById. La forma más rápida de acceder a un nodo es mediante su identificador, para lo cual ha tenido que serle asignado dicho identificador en el fichero HTML.


61

En el siguiente ejemplo podemos observar como una vez identificado un elemento se puede acceder a él mediante la función document.getElementById(identificador) devolviéndonos el nodo cuyo identificador es el que se ha pasado como parámetro.

Siempre es posible trabajar con el nodo del árbol para acceder y modificar sus propiedades, así como para acceder a otros nodos relacionados con él en el árbol (esto es: sus hijos, su padre, sus hermanos...). Entre las propiedades más importantes de un nodo es importante hacer notar las siguientes:

id: indica el identificador del nodo.

nodeType : Los códigos de los distintos tipos de nodos son:

ELEMENT_NODE

ATTRIBUTE_NODE

TEXT_NODE

CDATA_SECTION_NODE

ENTITY_REFERENCE_NODE

ENTITY_NODE

PROCESSING_INSTRUCTION_NODE

COMMENT_NODE

DOCUMENT_NODE

DOCUMENT_TYPE_NODE

DOCUMENT_FRAGMENT_NODE

NOTATION_NODE

nodeName: que devuelve el tipo de etiqueta HTML que representa al nodo. Hay navegadores

que lo devuelven en mayúsculas y otros en minúsculas por lo que siempre que queramos

comparar es bueno usar el método toLowerCase que posee toda cadena.

className: que devuelve el nombre de la clase que haya sido asignado al nodo.

nodeValue: que almacena el texto contenido en los nodos de tipo texto, es null para los nodo de

tipo elemento.


62

Veamos un ejemplo que muestra estas propiedades para un elemento llamado intro.

También es posible acceder a las colecciones de nodos con getElementsByTagName De la misma forma que hemos accedido a un solo nodo por su nombre, podemos acceder a una colección de nodos por el hecho de ser todos del mismo tipo. A diferencia de getElementById (que es un método de document), getElementsByTagName es un método de todo nodo, por lo que podemos seleccionar todos los nodos de un determinado tipo (si lo aplicamos a document) o aquellos de dicho tipo pero que cuelgan de un determinado nodo (como por ejemplo en miNodo.getElementsByTagName). El parámetro que acepta getElementsByTagName es una cadena, como por ejemplo getElementsByTagName( 'H4'). En el siguiente ejemplo se añade un evento a todos los enlaces para que al pasar por ellos se cambie el color de fondo.


63

Cambio de propiedades mediante lenguajes de guión. Acceso a los atributos de un nodo. Javascript implementa dos métodos que posee todo nodo:

getAttribute ( 'nombre_del_atributo' ): para acceder al valor del atributo.

setAttribute ( 'nombre_del_atributo', 'nuevo_valor' ): para modificar el valor del atributo, o

añadir nuevos atributos.

En el siguiente ejemplo se acceden, modifican y añaden algunos atributos de los nodos del documento,

Acceso a los elementos de un formulario. Con este método es posible cambiar después de haberse cargado la página lo que hace que los objetos contenidos en un formulario sean muy versátiles y fáciles de manejar mediante JavaScript. Una de las utilidades para las que se usa frecuentemente JavaScript es para comprobar que los datos introducidos en un formulario son correctos. Para ello se comprueban los datos en el momento en que se detecta el evento de enviar el formulario y se procede a dar curso a tal evento si los datos son correctos (devolviendo un valor true), o a paralizarlo si hay algún problema (devolviendo el valor false).


64

Un ejemplo de acceso a la propiedad value,

El ejemplo anterior se puede observar que un elemento de un formulario siempre tiene una propiedad llamada value, a la cual podemos acceder para consultar (como en if ( el.q.value.length>0 )) o para modificar (como en el.q.value+=" site:www.vrivas.es";). Una excepción a la norma anterior son los checkbuttons y los radiobuttons. Aunque tienen su propiedad value, la forma correcta de conocer si están pulsados o no es mediante la propiedad checked, que es de tipo booleano y por lo tanto toma los valores verdadero o falso. En el siguiente ejemplo podemos ver como se puede modificar el estado de un conjunto de checkbox al estilo de como lo hacen los lectores de correo electrónico de las webs.


65

También es posible desde los formularios responder a distintos eventos como en los casos de onfocus y onblur.

onfocus se activa cuando el usuario llega al campo, ya sea porque ha pulsado el tabulador o

porque ha pinchado el ratón sobre el campo.

onblur, se activa justo en el caso contrario: el usuario estaba en un campo y hacer cualquier

acción que implica salir de ese campo, es decir, que el campo pierda el "foco".

El siguiente ejemplo, pone en mayúsculas un texto al salir de él

4.9. Gestión de eventos Tipos de eventos. La importancia de los eventos radica en que nos posibilita modificar el contenido de un documento HTML sin intercambio de datos a través de la red. En este modelo, cada elemento o etiqueta HTML define su propia lista de posibles eventos que se le pueden asignar. Un mismo tipo de evento (por ejemplo, usar el botón izquierdo del ratón) puede estar definido para varios elementos XHTML diferentes y un mismo elemento XHTML puede tener asociados varios eventos diferentes. El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al evento. Así, el evento de pinchar un elemento con el ratón se denomina onclick y el evento asociado a la acción de mover el ratón se denomina onmousemove.


66

Técnicas para el manejo de eventos mediante lenguajes de guión. La gestión de eventos se efectúa mediante scripts ejecutados automáticamente cuando se produce un evento dado. Esta gestión se indica en ciertas marcas y se especifica la acción asociada a cada evento. La sintaxis es la siguiente: <ETIQUETA evento="JavaScript code"> donde ETIQUETA representa una marca HTML y evento el nombre del evento detectado. Por ejemplo se ejecutará la función evaluar cuando el usuario haga clic sobre el botón calcular, <INPUT TYPE="button" VALUE="calcular" onClick="evalua(this.form)"> La estructura this.form se refiere al formulario que contiene el botón. Esta estructura representa la variable pasada como argumento a la función evalúa. Manejadores de eventos.

onabort. Este evento se produce cuando un usuario detiene la carga de una imagen, ya sea porque detiene la carga de la página o porque realiza una acción que la detiene, como por ejemplo irse de la página.

onblur. El foco de la aplicación es el lugar donde está situado el cursor, por ejemplo puede estar situado sobre un campo de texto, una página, un botón o cualquier otro elemento.

onclick. Se produce cuando se da una pulsación o clic al botón del ratón sobre un elemento de la página, generalmente un botón o un enlace.

ondragdrop. Se produce cuando un usuario suelta algo que había arrastrado sobre la página web.

onerror. Se produce cuando no se puede cargar un documento o una imagen y esta queda rota.

onfocus. El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la página o la ventana ganan el foco de la aplicación.

onkeydown. Este evento se produce en el instante que un usuario presiona una tecla, independientemente que la suelte o no. Se produce en el momento de la pulsación.

onkeypress. Antes de este evento se produce un onkeydown en el momento que se pulsa la tecla.

onload. Este evento se desata cuando la página, o en Javascript 1.1 las imágenes, ha terminado de cargarse.

onmousedown. Se produce el evento onmousedown cuando el usuario pulsa sobre un elemento de la página. onmousedown se produce en el momento de pulsar el botón, se suelte o no.

onmouseout. Se desata un evento onmuoseout cuando el puntero del ratón sale del área ocupada por un elemento de la página.

onmouseover. Este evento se desata cuando el puntero del ratón entra en el área ocupada por un elemento de la página.

onmouseup. Este evento se produce en el momento que el usuario suelta el botón del ratón, que previamente había pulsado.

onmove. Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame.

onresize. Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la página los tenga.

onreset. Este evento está asociado a los formularios y se desata en el momento que un usuario hace clic en el botón de reset de un formulario.


67

onselect. Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario.

onsubmit. Se ejecuta antes del envío propiamente dicho.

onunload. Al abandonar una página, ya sea porque se pulse sobre un enlace que nos lleve a otra página o porque se cierre la ventana del navegador, se ejecuta el evento onunload.

Eventos de carga inicial. En este grupo podemos incluir los siguientes eventos:

onLoad: funciona en la subida de objetos, en particular ventanas e imágenes.

onUnload: es el opuesto del anterior y funciona cuando se deja una ventana para cargar otra o también para volver a cargar la misma (con el botón refresh).

onAbort: funciona cuando el usuario para la subida de un objeto, bien haciendo clic en otro enlace, bien pulsando la tecla stop del navegador.

onBeforeUnload: funciona de la misma manera que onUnload pero se carga un momento antes.

Delegación y propagación de eventos. Cuando las páginas tienen menos respuesta a cada uno de los manejadores de eventos adjuntados a diferentes elementos del árbol DOM, los cuales son ejecutados con demasiada frecuencia. Esa es la razón por la que usar delegación de eventos es una buena práctica. Si tienes 10 botones dentro de un div, conecte un solo evento a la capa, en lugar de un manejador para cada botón. Englobe los eventos, de modo que usted pueda encontrar el evento y averiguar de qué botón se originó. Además no es necesario esperar a la carga del evento para comenzar a hacer algo con el árbol DOM. A menudo todo lo que se necesita es que elemento al cual quiere acceder esté disponible en el árbol. Usted no necesita esperar a que todas las imágenes se hayan descargado.

4.10. Gestión de errores Manejo de error «No lenguajes de guión habilitados» (no script). En general los navegadores están preparados para ejecutar JavaScript. Sin embargo es conveniente crear un código que ofrezca un mensaje para aquellos navegadores que no lo soporten. La sintaxis es la siguiente: <NOSCRIPT>

Código HTML que se quiere mostrar.

</NOSCRIPT>

Chequeo de errores en funciones. En la interfaz de programación de casi todos los lenguajes hay herramientas para depurar el código permitiendo ejecutar fragmentos de código erróneo y recorriendo paso a paso puede observar como varían las variables. Podremos introducir puntos de ruptura para detener la ejecución en caso de cumplirse, por ejemplo, una condición.


68

Captura de errores. Errores del tipo de comprobar si una variable no existe o si una función está disponible podemos tratarlo mediante sentencias if, lo que es un trabajo muy engorroso. En JavaScript, a partir de la versión 1.4 podemos usar herramientas que facilitan la labor como es el caso de try/catch. Veamos el siguiente ejemplo, try { var z = noexiste+tampocoexiste; // Las variables no están definidas! } catch(e) { alert(e.name + " - "+e.message); } En este sencillo el ejemplo se ejecuta el bloque try, el código da error ya que las variables no existen y por lo tanto, pasa a ejecutarse el código del bloque catch. Todo lo que pongamos en un bloque try podemos decir que está "vigilado" por el intérprete de JavaScript. Si se produce un error en este bloque justo en el momento en el que se produce el error pasa a ejecutarse el bloque catch, pasando como variable un objeto de la clase Error, en el ejemplo lo hemos llamado e. Si el bloque try no produce ningún error entonces el código de catch nunca llega a ejecutarse. En Internet Explorer se vería así,

Las propiedades que más se utilizan de la clase error son name y message. La primera propiedad, name, contiene el tipo de error y message contiene una descripción del error. Cuando se produce error se dice que el intérprete (quien ejecuta JavaScript) lanza una excepción y nosotros la recogemos en el bloque catch. Podemos definir nuestras propias excepciones en JavaScript.


69

Por ejemplo, vamos a crear una función que comprueba si alguno de los campos de un formulario está vacío o no. Si está vacío lanzaremos una excepción con un mensaje de error. <SCRIPT type="text/javascript"> function checkField( fieldObj) {

if(fieldObj.value == '') throw new Error("Campo vacío");

}

function checkForm(formObj) {

for(var i=0;i<formObj.elements.length;i++) {

try {

checkField(formObj.elements[i]);

} catch(e) {

alert(e.message);

return false;

}

}

return true;

}

</SCRIPT> <FORM name="webtaller" action="" method="post" onsubmit="return checkForm(this);">

Introduce tu nombre: <INPUT type="text" name="Nombre" />

<INPUT type="submit" value="Enviar" name="Enviar" />

</FORM>

Con la función checkField, cuando un campo está vacío se lanza una excepción creando un nuevo objeto de la clase Error pasándole por parámetro el mensaje de error. En la función checkForm recorremos todos los campos del formulario y llamamos a checkField para comprobar si está vacío, además, recogemos una excepción si la hay y mostramos el mensaje de error. Uso de puntos de ruptura. Si ejecutamos el código línea a línea tendremos que recorrer todo el algoritmo que represente el script. Durante ese proceso puede que nos interese que algunas partes las realice sin detenerse pero que en otras realice una pausa para observar los estados de las variables en juego. Por ejemplo, se pueden marcar puntos de ruptura en código C

Es decir, un punto de ruptura hará que el script se pare pero solo si el depurador llega a la línea marcada con el punto de ruptura.


70

4.11. Usos específicos de lenguajes de guión

Integración multimedia mediante lenguajes de guión. JavaScript sirve principalmente para mejorar la gestión de la interfaz cliente/servidor. Estos eventos pueden ser el recorrido del propio documento HTML o la gestión de un formulario. Un script JavaScript insertado en un documento HTML permite reconocer y tratar localmente, es decir, en el cliente, los eventos generados por el usuario. Los plugins son pequeñas aplicaciones que complementan las funcionalidades de los navegadores. Animaciones. En el lenguaje de programación Javascript existen librerías específicas que sirven para realizar animaciones de diversos tipos. Es el caso de jsAnim, software gratuito que tiene muchas funciones útiles para insertar dinamismos a las páginas web sin, algo fundamental, perder accesibilidad. Esta librería nos ayuda a crear animaciones CSS utilizando como lenguaje Javascript modificando los atributos de estilos de una manera suavizada y a lo largo del tiempo, lo que permite crear el efecto de animación. Los pasos para la instalación de la librería jsAnim son: 1. Descomprimir la carpeta donde viene jsAdmin y subirla al servidor. 2. Insertamos el siguiente código en la cabecera de nuestra página para que pueda ser accesible el script de las librerías. <SCRIPT type="text/javascript" src="ruta_al_archivo/jsAnim.js"> </ SCRIPT> Es recomendable trabajar con un archivo .js para realizar nuestras funciones, en ese caso incluiríamos dicho archivo desde la cabecera, de la misma forma que hemos añadido la librería. <SCRIPT type="text/javascript" src="ruta_al_archivo/archivoPropio.js"> </ SCRIPT> 3. Creamos una instancia a un objeto jsAnimManager. Este objeto controla la animación de varios objetos. var manager= new jsAnimManager(); Casi todas las propiedades de cualquier elemento de una página se pueden animar pero para ello es necesario crear primero un objeto jsAnimObject, indicando el identificador del elemento de la página que deseamos animar. var anim=manager.createAnimObject(?id_del_elemento?);


71

4. Una vez que hemos creado el objeto pasamos a animar una propiedad del elemento: anim.add({property: Prop.top, from: 50, to: 500, duration: 2000}); La línea de código anterior inicializa la animación, que parte de 50 y va hacia 500, en dos segundos. Con esto ya tendríamos la parte del código Javascript creada. 5. El siguiente paso es la del código HTML y CSS. En este caso vamos a animar una imagen, y lo único importante es ponerle el identificador a esa imagen igual al identificador que utilizamos para acceder al elemento desde el código Javascript. Código CSS:

.ejemp{

witdh:600px

backgroud-color: green;

}

Código HTML:

<DIV class=ejemp>

<IMG src="images/figura.gif" id="id_del_elemento">

</DIV>

El código completo de este ejemplo con jsAnim en un único archivo HTML:

<HTML><HEAD>

<SCRIPT type="text/javascript" src="jsAnim.js"> </script>

<SCRIPT type="text/javascript">

function animacion() {

var manager= new jsAnimManager();

shroom = document.getElementById("elementId");

shroom.style.position = "relative";

var anim = manager.createAnimObject("elementId");

anim.add({property: Prop.left, to: 450, duration: 2000});

}

</SCRIPT>

<TITLE>Ejemplo animacion con jsAnim</TITLE>

</HEAD><BODY>

<DIV class="ejemp" style="border: medium solid Fuchsia; width: 600px; height: 200px;">

<IMG src="images/figura.jpg" id="elementId">

</DIV><BUTTON onclick="animacion()">Animate!</BUTTON>

</BODY></HTML>


72

Efectos especiales en elementos gráficos y texto. Es posible modificar las propiedades de un elemento a través de distintos marcos o ventanas gracias a los scripts diseñados de forma exacta para crear efectos dinámicos. Por ejemplo, crear una función que use el id de un objeto pasando como parámetro, y que cambien su estilo CSS. #objeto { Background-color:#ff; Width: 200px; Height: 300px; Margin: 8px; Padding: 8px; } Tendremos un manejador de eventos para que dispare la función, pasándole como parámetro, el id del objeto que se quiere cambiar, el nombre de la propiedad, y el nuevo valor. Onclick=”cambiaEstilo”(´objeto´, ´background-color´,´blue`);” La function que cambia la propiedad CSS: Function cambiaEstilo (objectID, propiedadCSS, nuevoValor) { Var object=document.getElementByID (objectID); Object.style=style[propiedadCSS] = nuevoValor; } De igual forma se puede cambiar la visibilidad de un objeto, su estilo, etc. y también mover un objeto, etc. Rejillas de datos. Los grids, o rejillas son un elemento de trabajo para los formularios de cualquier aplicación. Pueden aparecer en todas las secciones del programa que contemplan la opción de consulta y búsqueda. En las rejillas de datos es dónde se muestran los datos en forma de registros de información. Está compuesto de filas y columnas. En muchas ocasiones se compara al ser similar con una hoja de cálculo.


73

Su función es facilitar la comprensión de la información mediante filtrada y búsquedas más rápidas y personalizadas. Por ejemplo,

Manejo de canales de suscripción (RSS). RSS son las siglas de Relly Simple Sindication y es un formato XML que se usa para sindicar contenidos de sitios webs. Se trabajará con un script en el que se debe especificar en una línea de código el archivo RSS del que tiene que extraer los titulares. Del archivo de descarga tendríamos que cambiar la siguiente línea: ReadRSS('cnn_tech_rss.xml','rssBodyTemplate','rssTitleTemplate'); Este archivo lo podríamos cambiar por la URL completa del feed RSS del servidor donde se lo tienen publicado. Por ejemplo, para leer el RSS con las novedades de FAQ que publicamos en lacasadelosdeseos.com se llamaría la función así: ReadRSS('http://www.lacasadelosdeseos.com/rss/faq_rss.php','rssBodyTemplate','rssTitleTemplate'); Descripción de las técnicas de acceso asíncrono (AJAX). Para poder ejecutar todas las funciones de llamada de Ajax se emplea el lenguaje JavaScript. Ajax presenta muchas ventajas ya que es compatible con muchos sistemas operativos y puede ser utilizada en varias plataformas al estar basado en estándares abiertos como JavaScript y Document Object Model (DOM).


74

En la imagen siguiente podemos ver todas las tecnologías que conforman a AJAX.

Uso de lenguajes de guión en dispositivos móviles. Tanto Safari para Apple iOS como el navegador de Android ofrecen soporte para Javascript. Lo mismo ocurre la mayoría de los otros navegadores que pueden ser instalados sobre estas plataformas, como Internet Explorer u Opera Mobile. En algunas plataformas el cliente o la propia operadora pueden haber inhabilitado la ejecución de código Javascript en el navegador. En estos casos deberemos utilizar la etiqueta NOSCRIPT. En el resto de casos Javascript se incluye en la página del mismo modo que para las demás plataformas usando <SCRIPT> y </SCRIPT>, o insertando un script desde un archivo externo:

Uso del atributo src y type.

Hay que distinguir entre el caso de un dispositivo/navegador que es compatible con Javascript

pero lo tiene inhabilitado, y el de uno que no tiene soporte para Javascript. En este último caso,

el código se le mostrará al usuario como texto.

Para evitar esto se pueden colocar los signos de apertura de comentario HTML “<!–” y de cierre de comentario HML “–>” englobando el código. Por ejemplo,

Uso de cuadros de diálogo standard. Javascript implementa una serie de cuadros de diálogo:

alert – para mostrar un mensaje.

confirm – Para pedir al usuario una respuesta Si/No.

prompt – Para pedir al usuario una cadena de texto.

print – para enviar la página a la impresora.


75

Su implementación en dispositivos móviles es plenamente conforme a las reglas de estilo recomendadas por las correspondientes plataformas, haciendo que puedan ser utilizados para crear un interfaz de usuario con aspecto muy profesional sin necesidad de librerías adicionales.

Utilización de document.write. Si el script de una página no utiliza document.write, es conveniente añadir a la etiqueta <SCRIPT> el atributo defer=”defer" haciendo notar a los navegadores que no necesitan esperar a que el script se descargue ejecuta para continuar la creación del documento. En un dispositivo móvil el uso de document.write puede suponer una mejora considerable del rendimiento en comparación con la manipulación del DOM.

Detección de la plataforma. En JavaScript existe un objeto navigator que representa el navegador del cliente en el cual se está ejecutando. Con los atributos de este objeto podemos determinar el tipo de dispositivo en el que se ejecuta y tomar decisiones en base a ello.

Las propiedades más útiles del objeto navigator son:

appName, el nombre del navegador.

appVersion, la versión del navegador.

plugin, array de plugins soportados.

platform, el sistema operativo. Normalmente, utilizaremos la función indexOf para ver si alguno de estos atributos contiene el valor que nos interesa. Por ejemplo: // Detectar si es un dispositivo Android var android = (navigator.platform.indexOf("android")>=0); if (android) { // Hacer algo }

Tamaño de la ventana. En JavaScript hay dos objetos relacionados con el tamaño de la ventana de visualización, uno es document.documentElement y otra es screen que hace referencia al tamaño de la pantalla del dispositivo.

El objeto screen tiene cuatro atributos: width, height, availWidth, y availHeight. Los dos últimos indican el tamaño disponible no ocupado por las barras de herramientas del sistema operativo. En un dispositivo móvil, los valores de availWidth y availHeight coinciden normalmente con los valores de width y height. Con los elementos document.documentElement.clientWidth y también document.documentElement.clientHeight podemos obtener las referencias del tamaño de las ventanas. Estos valores pueden cambiar si se produce un cambio de orientación del dispositivo, en aquellos que lo permiten.


76

Cuando se produce un cambio de orientación se genera normalmente un evento onresize, y en algunos casos un evento onorientationchange.

Historial de navegación y gestión de URLs. JavaScript implementa los objetos location y history para gestionar el historial de navegación.

El objeto location tiene varios atributos relacionados con la dirección de la página, como son href para obtener la URL completa, y hash para obtener el anchor de la URL si está presente ( el símbolo # y todo lo que hay a su derecha). El objeto location implementa los métodos reload() para refrescar la página, y replace(url). Este último carga otra página sin crear una entrada en el historial. El objeto history implementa los métodos back(), go(número), y forward(). Una llamada al método back() es equivalente a pulsar el botón Atrás del navegador: Por ejemplo, 

<INPUT type="button" onclick="history.back()" value="Back">



<A href="javascript:history.back()">Back</A>

En un diseño de interfaz de usuario para móviles, puede ser interesante incluir un botón para ir a la página anterior, ya que los botones del navegador pueden no estar visibles, al contrario de lo que ocurre en ordenadores de sobremesa o portátiles.

Gestión del foco y del scroll. El uso más común del foco es en una entrada de formulario INPUT para solicitar al usuario la introducción de datos en un campo concreto.

Para el caso del scroll viene implementada una función scrollTo(x,y) que permite desplazar el contenido de la página para que las coordenadas especificadas se sitúen en la esquina superior izquierda de la pantalla. En páginas diseñadas para dispositivos móviles, es habitual utilizarla dentro del evento onload para esconder la barra de herramientas del navegador con window.scrollTo(0, 1); Por ejemplo, también se puede utilizar esta llamada para crear links que lleven al comienzo de la página, <A href="javascript:window.scrollTo(0, 1);">Ir al comienzo</A>

Temporizadores. Tenemos dos tipos, setTimeout e setInterval. El primero se ejecuta una única vez, y el segundo se ejecuta cada n milisegundos hasta que es cancelado con una llamada a clearInterval.

En navegadores de móviles, el uso de temporizadores puede aumentar significativamente el consumo de batería. Los temporizadores utilizan el mismo hilo de ejecución que el script principal. Si el tiempo de proceso de éste es elevado, puede ocurrir que un temporizador con una frecuencia de repetición elevada (por ejemplo, cada 10 ms) no pueda llevar el ritmo adecuadamente.


77

4.12. Entornos integrados (Frameworks) para el desarrollo con lenguajes de guión Características de los entornos de uso común. Comparativa. Un framework o infraestructura digital, es una estructura tecnológica con un software concreto, que puede servir de base para la organización y desarrollo de más software. Habitualmente estos entornos aportan soporte de programas, bibliotecas, y un lenguaje interpretado para juntos desarrollar y unir los diferentes componentes de un proyecto. Un framework aporta funcionalidades genéricas que pueden ser utilizadas para desarrollar aplicaciones de manera rápida y modular, ahorrando tiempo y esfuerzo. En su mayoría, los frameworks que permiten trabajar con Javascript tienen las siguientes características:

La compatibilidad permitirá aumentar la portabilidad y eliminar gran parte de problemas

entre navegadores y sus motores intérpretes Javascript.

Comunicación asíncrona (Ajax). Permite manipular los aumentando la interactividad y

experiencia del usuario.

DOM. Maximizan la capacidad de agregar, editar, cambiar, eliminar elementos usando

librerías que facilitan usar DOM.

Validación de Formularios. Permiten de una manera relativamente fácil validar campos

dentro de uno o varios formularios.

Efectos visuales del tipo aparecer y desaparecer, redimensionamiento, etc..

Manejo JSON. Incrementa al máximo el manejo de datos, que pueden ser utilizados para

presentar informaciones de manera dinámica y en tiempo de ejecución.

Manejo de eventos. Esta característica agregada permite reaccionar de una manera u otra

dependiendo de las acciones del usuario.

Arrastrar y soltar (Drag and Drop). Es una funcionalidad que nos permite arrastrar elementos

dentro de una misma página que interactúe con el resto de los elementos.

Editores avanzados. jsFiddle es un entorno de desarrollo basado en los frameworks más populares. Se divide en cuatro secciones, un editor de HTML, CSS, JavaScript, y una sección que muestra la salida de todo ese código. De entre los frameworks que podemos elegir están los más usados: MooTools, jQuery, Dojo, Prototype, YUI, Glow y Vanilla. Permite guardar y compartir el código con una simple URL y ofrece directamente código para incrustarlo en cualquier sitio.


78

Funcionalidades de validación y depuración de código. En el cliente antes de enviar los datos hay que realizar tantas comprobaciones como podamos y sobre las diferentes naturaleza de los datos. Cuestionar la validez de los datos a tiempo mejora el tiempo de respuesta porque reduce la carga del servidor y libera ancho de banda para otras aplicaciones. Generalmente las técnicas de control se basan en el comportamiento del evento onsubmit de JavaScript. Como ocurre con otros eventos como onclick y onkeypress, onsubmit modificará su comportamiento en función de los valores que se manejen. Si el evento onsubmit devuelve el valor true, el formulario sigue su camino pero si devuelve el valor false, el formulario no se envía. La cuestión clave de esta técnica consiste en comprobar todos y cada uno de los elementos del formulario. En cuanto se encuentra un elemento incorrecto, se devuelve el valor false. Si no se encuentra ningún error, se devuelve el valor true. No puede haber ningún campo que incumpla alguna de las condiciones que se establezcan para su validez. La sintaxis podría plantearse de la siguiente forma: onsubmit="return validacion()" Donde validación() es la función que hará las comprobaciones sobre la corrección o no de los datos y por tanto devolverá true o false. Como hemos dicho, el formulario solamente se enviará al servidor si esa función devuelve true. En el caso de que la función validacion() devuelva false, el formulario permanecerá sin enviarse. Si el usuario ha cometido algún error al rellenar el formulario, se le puede notificar de forma instantánea, sin necesidad de esperar la respuesta del servidor. Comunicar los errores de forma inmediata siempre mejora la satisfacción del usuario con la web (lo que técnicamente se conoce como "mejorar la experiencia de usuario") y ayuda a reducir la carga de procesamiento en el servidor. La usabilidad debe estar siempre presente en el diseño web pero en el caso de los formularios es de vital importancia puesto que es un momento que recoge situaciones que decantarán el éxito de un sitio web. NOTA: La validación de un formulario consiste en llamar a una función de validación cuando el usuario pulsa sobre el botón de envío del formulario. En esta función, se comprueban si los valores que ha introducido el usuario cumplen las restricciones impuestas por la aplicación. Existen una amplia variedad de comprobaciones, casi tantas como elementos de formulario existen. Las más habituales son:

Campos obligatorios. Por ejemplo,


79

Seleccione el valor de una lista desplegable. Por ejemplo,

Direcciones de correo electrónico correctas. Por ejemplo,

Fechas que cumplan el formato y la lógica del algoritmo. Por ejemplo,

En este caso no es tanto el formato puesto que están separados los términos y podremos tratarlo cómo número pero si será muy importante el control de la fecha de caducidad para cumplir la lógica del control de tarjetas de crédito. O este otro ejemplo,

En este caso no sólo hay que controlar el formato de las fechas si se escriben directamente y no usando el calendario, sino que también hay que asegurarse que la segunda fecha no sea anterior a la primera.


80

Introducir números donde sólo pueden admitirse números puesto que se realizarán cálculos o comparaciones numéricas.

Por ejemplo,

Técnicas para la documentación del código. Existen dos formas de comentar en JavaScript: por línea y por bloque. Ejemplo de comentario por línea en JavaScript, <HTML><BODY> <SCRIPT type="text/javascript"> // Comentario de una línea document.write("<h1>Lo que se comenta, no se escribe</h1>"); </SCRIPT></BODY></HTML> Ejemplo de comentario por bloque en JavaScript, <HTML><BODY> <SCRIPT type="text/javascript"> /* Este es un comentario por bloque. Sin importar la cantidad de líneas. */ document.write("<h1>Lo que se comenta, no se escribe</h1>"); </SCRIPT></BODY></HTML>


81

Podemos insertar los comentarios en cualquier punto del código y por su puesto dentro de las funciones. Por ejemplo,

Utilidades adicionales para la realización de contenidos dinámicos. Extensiones útiles de navegadores.

Browserstack. Permite también comprobar webs en local y soporta gran cantidad de navegadores diferentes, todos con herramientas tipo Firebug, IE Developer tools, Firebug lite o Web Developer.

Ultimate CSS Gradient Generator. Este editor de Colorzilla es muy útil para crear gradientes

con CSS3 ya que te permite crearlos como si de Photoshop o Fireworks se tratara

My Lovely Charts. Permite en grandes proyectos organizar nuestras ideas que nos lleve a

tener clara la estructura de la web.


82

Entornos de desarrollo específicos: desarrollo sobre dispositivos móviles.

Titanium. Este framework proporciona al usuario más de 100 controles totalmente personalizables como pueden ser tablas, botones, listas, soporte para la geolocalización, redes sociales y multimedia.

Sencha Touch. Es un framework para desarrollar aplicaciones en dispositivos móviles utilizando HTML 5 facilitando la creación de aplicaciones como si fueran nativas de sistemas operativos Android o Apple iOS. Soporta HTML 5, CSS 3 y Javascript.

Un ejemplo de las plantillas que ofrece la aplicación,

Sproutcore Touch. Se trata de una framework para el desarrollo de aplicaciones web basadas

en HTML 5 que incluye un completo soporte para eventos táctiles y aceleración de hardware en el iPad y iPhone.

PhoneGap. Un framework para construir aplicaciones web para dispositivos móviles utilizando los estándares HTML 5, CSS 3 y JavaScript.

El framework soporta geolocalización, vibración, acelerómetro, cámara, cambio de orientación, magnetómetro y otras interesantes características para iPhone, Android, Blackberry, Symbian y Palm.


83

Recuerda…

Las cadenas son tipos de variable que se utiliza para almacenar caracteres, palabras y/o frases de

texto.

Los scripts pueden escribirse tanto en la HEAD como en el BODY.

Browserstack es compatible con Firebug.

Los Frameworks son entornos que aportan soporte de programas, bibliotecas, y un lenguaje

interpretado para juntos desarrollar y unir los diferentes componentes de un proyecto.

Los arrays almacenan valores en una dimensión, por eso para acceder a las posiciones utilizamos tan

solo un índice.

JavaScript mejora la gestión de la interfaz cliente/servidor.

El manejo de eventos es una característica agregada que permite reaccionar de una manera u otra

dependiendo de las acciones del usuario.

PhoneGap no es un framework para el desarrollo de aplicaciones web basadas en HTML 5 que

incluye un completo soporte para eventos táctiles y aceleración de hardware en el iPad y iPhone.

Los navegadores web están desarrollados por equipos de personas que intentan acatar las normas

establecidas por la W3C.


84

5. CONTENIDOS MULTIMEDIA Podemos calificar como multimedia a los medios electrónicos u otros medios que permiten almacenar y presentar contenido multimedia. Estos medios pueden ser variados, desde texto e imágenes, hasta animación, sonido, video, etc. El uso de elementos multimedia es similar al empleo tradicional de medios mixtos en las artes plásticas, pero con un alcance más amplio.

5.1. Definición de multimedia. Tipos de recursos multimedia El uso de múltiples medios de expresión es lo que engloba lo que denominamos recursos multimedia. Los principales medios son el sonido, las imágenes e ilustraciones estáticas, los vídeos, los gráficos animados, videoconferencias, etc. El más popular, y de los primeros en incorporarse, por su simplicidad son las imágenes estáticas o sencillamente imágenes o en la mayoría de los casos, fotografías. Ejemplos clásicos de recursos multimedia,

NOTA: En Internet los tres formatos de imagen que más se utilizan para en el diseño de páginas web son: .jpg, .png y .gif. Las características principales de los 3 formatos de imagen son: - JPG (o JPEG, Joint Photographic Experts Group): Formato con muy buen rendimiento en fotografías o/y ilustraciones complejas; por tanto, es un formato utilizado para compartir imágenes con tonos continuos en la web. Este formato da soporte a los modelos más usuales de color como son CMYK (cyan-magenta-yellow-cyan) y RGB (red-green-blue), incluso para modelos en escala de grises, lo que amplía mucho la gama de tonalidades que se pueden obtener.


85

En la siguiente imagen puede comprobarse las diferencias en el color entre el modelo RGB (izquierda) y el modelo CMYK (derecha).

Imagen con licencia para ser reutilizada libremente obtenida con el buscador Google.

El formato JPEG comprime el tamaño del archivo final utilizando un algoritmo de compresión con pérdida. Es decir, que para representar cierta cantidad de información (en este caso de color) se utiliza una menor cantidad de dicha información. Por eso se dice que es un formato comprimido. En los programas de edición de imágenes digitales, al retocarlas o guardarlas se puede especificar qué nivel de compresión aplicamos y qué pérdida de calidad se desea para cada archivo. Si se aplica la opción de máxima compresión, la imagen resultante será difícil de reconocer, pero existen configuraciones que reducen el tamaño final del archivo pero producen una imagen relativamente buena. Ahí está la clave. - GIF (Graphics Interchange Format): Muy práctico para los dibujos e imágenes sencillas, especialmente si tienen pocos matices. GIF no es el formato adecuado para guardar fotografías que queremos tengan gran calidad. Los expertos concretan que este formato es ideal para imágenes que tengan grandes bloques de colores planos como ilustraciones simples o logotipos. Además, tiene la capacidad de conservar la transparencia. El formato GIF trabaja con el algoritmo de compresión LZW, y por tanto, los fabricantes de software que utilizan imágenes GIF deben pagar a la propietaria los derechos que es Unisys. Quizás sea esta una de las razones del aumento de la popularidad del formato PNG. - PNG (Portable Network Graphics): Formato libre de derechos, que intenta reunir características de los anteriores dos formatos. Se le considera válido para todo tipo de imagen y de transparencias. Está basado en el formato GIF. Los navegadores más antiguos pueden dar problemas con este formato que está preparado para soportar imágenes RGB, escalas de grises y mapa de bits. NOTA: PNG, a diferencia de las imágenes GIF, trabaja la transparencia “sin asperezas en los bordes” como concreta al definir el formato Luis Eduardo Barrueto.


86

Gifs animados. Esta variante del formato de imagen incluye la posibilidad de crear ficheros formados por una sucesión de imágenes en formato GIF, empaquetadas de tal forma que al ser leídos por el navegador aparecen en pantalla como imágenes animadas. Son muy populares en las Web y aunque desde el punto de vista de la accesibilidad no están recomendadas sí que son habituales como sistemas de información en redes sociales y servicios de mensajería electrónica. Para crear este tipo de archivos animados es preciso primero crear cada uno de los "fotogramas" por separado, para luego "montarlos" utilizando una aplicación específica. Es decir, primero seleccionamos o creamos las diferentes imágenes y posteriormente las ordenamos y unimos para dar el efecto deseado. Por ejemplo, GifBuilder para Mac,

Otro ejemplo de aplicación para crear gifs animados sería Gif Movie Gear, que a partir de fotos o gráficos permite crear estos elementos dinámicos.


87

Otro ejemplo es Instagiffer que permite incorporar vídeos de Youtube y modificar parámetros como el cambio de velocidad en el gif.

Sonidos. Es interesante empezar diferenciando qué es un formato de archivo y qué es un códec. El primero son las características que va a tener ese archivo y el segundo, el códec, simplemente describe como debemos codificar y decodificar el archivo para trabajar con él. Trabajamos habitualmente con tres tipos de formatos:

Sin comprimir (WAV, AIFF o AU).

Comprimidos sin pérdida, o también conocidos como lossless (WMA, FLAC, TTA, ATRAC).

Comprimidos con pérdida o lossy (MP3, AAC). Cuando trabajamos con formatos sin comprimir estamos trabajando con ficheros que no han sufrido ningún tipo de procesamiento, por lo que el audio que escuchamos es el audio real que se grabó. Analicemos algunos de estos formatos y veamos sus peculiaridades. - WAV. Si queremos que no se pierda calidad es aconsejable que se utilice WAV (o formato AIFF si se trabaja con un Mac) pero ocupan mucho espacio. Una canción en formato WAV suele rondar los 45 MB. Peso nada razonable para mover por la red. Si fuese de un PC a otro por conexión de área local no habría mucho problema, pero en Internet la cosa es diferente. La solución será comprimir el archivo o bajarlo de calidad. La compresión de estos ficheros es habitual, hay múltiples aplicaciones y posibilidades para ello. NOTA: Se suele decir que estos formatos son fieles al oído humano y reproducen lo grabado en todo el espectro audible (20Hz-20KHz). De todas formas, el formato WAV no se usa prácticamente en la red debido a su enorme tamaño.


88

- MP3. Este formato es el más popular, hay que tener en cuenta que aplica restricciones (graves profundos, agudos, estéreos, etc.) dejando solo frecuencias comprendidas aproximadamente entre los 200Hz-15KHz. Los expertos siempre alertan del recorte que supone esta restricción para los bajos, bombos e incluso los platillos de la batería. La clave de la popularidad está en que con los formatos MP3 o MP4 los archivos que ocupaban 45 MB pasan a ocupar 4 ó 5 MB. - MP4. Este formato es usado tanto para audio como para vídeo. Muchos lo consideran el dominador de los formatos de audio en Internet, y habitualmente es el que encontraremos a la hora de reproducir audio y vídeo en smartphones y cualquier otro pequeño dispositivo. Aporta versatilidad y presenta una extraordinaria compresión, por lo que es el formato ideal para mover archivos por la Red. El uso masivo de smartphone ha popularizado el uso de variados formatos de vídeo. Un smartphone es un teléfono móvil con pantalla táctil, que permite al usuario conectarse a Internet, gestionar cuentas de correo electrónico e instalar otras aplicaciones. - Archivos MIDI (de extensión mid). A diferencia de los archivos sonoros, los archivos MIDI no son muestras de sonidos reales, sino sólo datos numéricos que luego son interpretados por la propia máquina en la que se ejecutan. NOTA: Para reproducir archivos MIDI en nuestro ordenador necesitamos no sólo una tarjeta de sonido, sino algún componente capaz de reproducir los instrumentos MIDI. Este componente puede ser de tipo hardware o software. Los elementos de hardware más comunes son las tarjetas llamadas MIDI-compatibles. Video. Hasta hace poco, la introducción de vídeo en los documentos era extremadamente rara debida fundamentalmente a dos razones: El costo del equipo necesario, especialmente el hardware (tarjetas digitalizadoras, tarjetas de compresión/descompresión mpeg, cámaras de vídeo, etc.). La falta de un formato se adaptará con facilidad a las necesidades y condicionantes de los medios informáticos. El abaratamiento de los componentes de hardware, primero, y el perfeccionamiento de los formatos de vídeo digital, han permitido que el uso de vídeo se vaya extendiendo progresivamente, aunque algunos de los problemas de infraestructura aún subsisten (fundamentalmente la falta de ancho de banda para trasmitirlos vía Internet, ya que los archivos de vídeo suelen ser muy grandes, y la necesidad de contar con ordenadores muy potentes para manejar los archivos de video con facilidad). - AVI. Proviene su nombre de las siglas en inglés de Audio Video Interleave y es un formato para audio y vídeo. El formato AVI permite almacenar simultáneamente un flujo de datos de vídeo y varios flujos de audio. El formato es interpretado por un programa externo denominado códec. ¿Esto que implica? Pues que el audio y el vídeo contenidos en el AVI pueden estar en cualquier formato (AC3/DivX, MP3/Xvid, u otros).


89

Una ventaja que ofrece el formato AVI al admitir varios flujos de datos de audio es que permite trabajar varios canales de audio, como por ejemplo, contener bandas sonoras en varios idiomas para un mismo vídeo. A la hora de reproducirlo es cuando el propio reproductor decide (realmente lo hacen los usuarios desde el panel de control) cuál de estos flujos debe ser reproducido en cada momento. Un par de términos que aparecen constantemente y que conviene aclarar son:

DivX es el primer códec de vídeo que se usó para codificar películas en formato DVD vídeo y reducir su tamaño para que cupiera en un CD.

Xvid es un códec de vídeo libre, que apareció para contrarrestar la fuerza de los códec más populares que eran propietarios. Muy útil para codificar películas y reducir su tamaño sin perder calidad. Xvid tiene una ventaja que lo hace especial: tras instalar el códec en Windows cualquier reproductor puede usarlo para reproducir películas codificadas en este formato.

- ASF. Otro formato de la familia Windows que nos ofrece la posibilidad de comprimir vídeo en un tamaño de archivo razonable conservando la alta calidad. - WMV. El vídeo WMV se empaqueta normalmente en algún contenedor multimedia, como pueden ser AVI o ASF. Los ficheros resultantes reciben la extensión .avi si el contenedor es de este tipo; .wmv si es un fichero sólo vídeo; .wma sería el equivalente para sonido, o .asf si se trata de un contenedor ASF, con contenido de audio y vídeo. - MOV. Este formato, internamente, separa los datos que maneja, lo que supone una ventaja en el proceso de edición. La desventaja es que al estar desarrollado bajo otra plataforma (Apple) requiere la instalación de un reproductor específico QuickTime en el sistema operativo más popular, Windows. - RMVB – Real media. Es un formato creado en exclusiva para la web. Gracias a él se puede comprimir vídeo a un tamaño razonable. Su principal característica es su alta calidad de compresión. - FLV. Es un formato de archivo propietario usado para transmitir vídeo sobre Internet usando Adobe Flash Player. Los contenidos FLV pueden ser incrustados dentro de archivos SWF. Aunque Youtube se ha pasado a la reproducción en HTML5, es éste formato es el que lo hizo popular y lo convirtió en la plataforma de vídeo que es ahora. Flash Vídeo puede ser usado en la mayoría de los sistemas operativos, mediante Adobe Flash Player, con un plugin extensamente disponible para navegadores web. - MP4 (MPEG-4). Se utiliza fundamentalmente para almacenar datos en archivos para PCs. Está formado por un conjunto de códecs y estándares internacionales de vídeo, audio y datos creados especialmente para la web. Como en las cámaras de hoy en día vienen integradas la captura y la codificación de la imagen y sonido en una sola acción, se optimiza la potencialidad del usuario para emitir. También se le llama MP4 a reproductores que cuentan con una pantalla capaz de reproducir vídeos e imágenes. - 3GP. Formato de archivos usado por teléfonos móviles para almacenar audio y vídeo. Este formato de archivo es similar al formato Quicktime. 3GP guarda vídeo como MPEG-4 o H.263. El audio es almacenado en los formatos AMR-NB o AAC-LC.


90

5.2. Inclusión de contenido multimedia en páginas web Los contenidos son la esencia de cualquier soporte de comunicación. La información que se nos ofrece es la que nos mueve a entrar en una web o usar reiteradamente la misma aplicación. Entre los desarrolladores suele repetirse el mantra "el contenido es el rey". En cualquier caso en el entorno multimedia la información ha dejado de limitarse a un texto, las plataforma son conjunto de elementos que permiten transmitir un mensaje o vender un producto. Los textos se apoyan en otros elementos visuales o auditivos para llamar la atención de nuestro público o reforzar la idea a transmitir. El aumento del ancho de banda de nuestros usuarios nos lleva a plantear como alternativa la creación de contenidos multimedia para la difusión de información en internet. No debemos limitarnos a introducciones flash para deslumbrar a nuestros visitantes cuando llegan al sitio web, debemos trabajar los contenidos multimedia como elementos que aportan en sí mismo información y que se convierta en una alternativa para aquellos usuarios que prefieren este tipo de soporte en vez de la lectura en línea de una página web. Adaptadores para recursos multimedia. Adobe Media Player. Adobe Media Player es una aplicación de escritorio multiplataforma diseñada específicamente para reproducir y para ver online o descarga contenidos de vídeo FLV o MPEG-4 cuando los usuarios estén en línea u offline. Ofrece una amplia variedad de características para descubrir, organizar, y suscribirse a contenido de video - incluso automáticamente descargando suscrito episodios por lo que puede verse en cualquier momento. Por ejemplo, galería multimedia de Adobe Media Player,


91

- Windows Media Player. El Reproductor de Windows Media es un reproductor de medios creado por la empresa Microsoft.

- QuickTime. Es compatible con el estándar MPEG-4. Existe una versión Pro que añade diversas funcionalidades como la edición de vídeo y codificación a variados formatos como AVI, MOV, MP4.

Enlace a diferentes recursos desde páginas web. - Bancos de recursos multimedia.

Banco de recursos multimedia (ISFTIC). Es un sitio creado para estimular y facilitar la creación de materiales didácticos. En él se pueden encontrar fotografías, ilustraciones, sonidos, animaciones, vídeos y símbolos relacionados con las áreas y materias de las distintas etapas y niveles educativos.


92

Internet Archive. Biblioteca digital formada por sitios de internet y objetos culturales en formato digital. Comprende vídeos, música en vivo, audios y textos escritos. También cuenta con un apartado dedicado a Educación.

Mediateca de RTVE.es. La mediateca de Radiotelevisión Española cuenta con vídeos, audios y fotos. Los audios se pueden insertar en una web. También permite acceder a un servicio de suscripción a los audios de RNE.

Videoteca Educativa de las Américas (VELA) es un sitio web creado por la Secretaría de Educación Pública del Gobierno de México. Su misión es reunir y difundir el acervo audiovisual educativo de particulares e instituciones del Continente Americano a fin de proporcionar servicios en línea que no sólo permitan la consulta y la descarga de dicho material sin fines de lucro, sino también el acceso a herramientas didácticas para reforzar el proceso de enseñanza-aprendizaje.

Ourmedia. Servicio que permite el alojamiento y descarga de vídeos, imágenes, audios, etc. que no posean copyright.


93

Wikimedia Commons. Los archivos se pueden utilizar y copiar respetando las condiciones que indican sus autores.

Recursos Educativos de Primaria en Flash. Página que contiene enlaces directos a recursos en formato flash respetando la ubicación y descripción original de los mismos. Los recursos están organizados en secciones, por ciclos y materias..

- Bancos y colecciones de recursos gratuitos sólo audio.

Soungle.com. Banco de sonidos gratuitos que se pueden utilizar en la creación de podcast.

Goear es un portal semejante a YouTube pero en el que se alojan archivos de audio en MP3.

Magnatune, Catálogo de audios musicales con licencia Creative Commons. Permite

expresamente la utilización de los audios en podcasts.

Podsafe Audio. Música bajo licencia Creative Commons de diversos estilos para podcast.

Tribe of Noise. Música de artistas independientes bajo licencia Creative Commons.

Dpop es una plataforma independiente para la promoción de artistas españoles a favor de la

cultura libre. Contiene música pop para descargar bajo licencia Creative Commons u otra licencia o copyleft.


94

Soundsnap es una plataforma para encontrar y compartir sonidos y efectos de sonido de forma gratuita.

- Bancos y colecciones de imágenes gratuitas.

Icon Archive. Amplia colección categorizada de iconos.

Free Printable Signs. Banco de señales de uso libre (de prohibición, de aviso, de información,

etc.). En formato PDF.

Iconspedia . Banco de iconos gratuitos.

Free Images. Sitio que contiene más de 2500 fotos gratuitas y organizadas por temas.

FlickrCC. Sitio que contiene fotografías bajo licencia Creative Commons, lo que significa que

podemos hacer uso de las imágenes siempre y cuando respetemos las condiciones que nos

impone su autor.


95

Banco de imágenes de la Biblioteca Nacional del Maestro (Argentina). Más de 1.300 imágenes digitalizadas que comprenden fotografías, ilustraciones, grabados y mapas históricos, para el desarrollo de propuestas pedagógicas creativas e innovadoras dentro y fuera del aula. Las imágenes se pueden imprimir, guardar o enviar por correo electrónico.

Openphoto. Otro banco de fotografías organizadas por temas.

- Bancos y colecciones de imágenes + texto.

Aula del mundo. Infinidad de láminas educativas imprimibles sobre diversos temas (matemáticas, geografía, historia, lengua, etc.). No están clasificadas bajo ningún criterio, salvo por la fecha de publicación.

Earth from Space (NASA). Podemos encontrar imágenes de ciudades, de la interacción humana sobre la Tierra, de huracanes, de regiones del mundo… Las imágenes son de dominio público y se pueden reproducir respetando estas condiciones.

- Videotecas y colecciones de vídeos.

Youtube es un portal donde los usuarios cuelgan vídeos que se pueden utilizar para elaborar actividades de diverso tipo.

Focus on Animation (National Film Board of Canada) es una web dedicada al mundo de la animación. En la sección “My film class” encontrará películas animadas para el profesorado y el alumnado clasificadas por temas: ciudadanos del mundo, derechos y responsabilidades, cuentos populares y leyendas, álbum de familia, etc.

Videoteca virtual de ATEI. Vídeoteca de la Asociación de Televisión Educativa Iberoamericana. Ofrece vídeos de carácter educativo, cultural y científico para su consulta acompañados de guías didácticas, materiales complementarios, referencias bibliográficas y enlaces en Internet, brindando además la posibilidad de interactuar evaluar dichos materiales.

TV Educa (Red Educativa Mundial, REDEM) Televisión educativa por internet donde es posible visualizar y descargar una gran variedad de cursos (manualidades, idiomas, literatura, matemáticas, biología, educación sexual, etc.), acceder a canales temáticos o consultar material de formación docente. Todo en formato vídeo. El apartado “herramientas” se proporcionan programas gratuitos para visualizar, editar y transformar los vídeos.


96

Incrustación de contenido multimedia. La mayoría de webs actualmente están preparadas para incrustar el contenido multimedia simplemente copiando un enlace a éste o directamente al lado del contenido podremos encontrar un enlace para compartir siguiendo unos sencillos pasos. Por ejemplo, pasos para insertar un vídeo de Youtube en una página web.

1. Haz clic en el enlace Compartir debajo del vídeo. 2. Haz clic en el enlace Insertar. 3. Copia el código que aparece en el cuadro ampliado. 4. Pega el código en el blog o entre el código HTML del sitio web.

Al igual podemos hacerlo con Twitter, Soundcloud, Facebook etc. La mayoría de webs con contenido multimedia ofrecen la posibilidad de compartir el contenido e incrustarlo en nuestra web o blog. Formatos de fichero web. El estándar MIME. Multipurpose Internet Mail Extensions o MIME son una serie de convenciones o especificaciones dirigidas al intercambio a través de Internet de todo tipo de archivos (texto, audio, vídeo, etc.) de forma transparente para el usuario. Una parte importante del MIME está dedicada a mejorar las posibilidades de transferencia de texto en distintos idiomas y alfabetos. Prácticamente todos los mensajes de correo electrónico escritos en Internet y una proporción considerable de estos mensajes generados automáticamente son transmitidos en formato MIME a través de SMTP. Los mensajes de correo electrónico en Internet están tan cercanamente asociados con el SMTP y MIME que usualmente se les llama mensaje SMTP/MIME.1 Los tipos de contenido definidos por el estándar MIME tienen gran importancia también fuera del contexto de los mensajes electrónicos. Ejemplo de esto son algunos protocolos de red tales como HTTP de la Web. HTTP requiere que los datos sean transmitidos en un contexto de mensajes tipo e-mail aunque los datos pueden no ser un e-mail propiamente dicho. MIME incorpora las siguientes características al servicio de correo electrónico:

Capacidad de enviar múltiples adjuntos en un solo mensaje

Longitud ilimitada del mensaje

Uso de conjuntos de caracteres no pertenecientes al código ASCII.

Uso de texto enriquecido (diseños, fuentes, colores, etc.)

Adjuntos binarios (ejecutables, imágenes, archivos de audio o video, etc.), que se pueden dividir de ser necesario

En la actualidad ningún programa de correo electrónico o navegador de Internet puede considerarse completo si no acepta MIME en sus diferentes facetas (texto y formatos de archivo). Tipos de reproducción. Streaming y carga progresiva. Este tipo de tecnología funciona mediante un búfer de datos que va almacenando lo que se va descargando para luego mostrarse al usuario que lo usa. Esto se contrapone al mecanismo de descarga de archivos que implica que el usuario descargue los archivos por completo para poder acceder a los ficheros.


97

Es un término muy común en la difusión de audio o vídeo. El streaming requiere una conexión por lo menos de igual ancho de banda que la tasa de transmisión del servicio. El streaming de vídeo se popularizó a fines de la década de 2000, cuando el ancho de banda se hizo lo suficientemente barato para gran parte de la población. Ventajas:

Se puede comenzar la reproducción en cualquier punto de un vídeo sin necesidad de esperar a que se descargue todo el contenido. La reproducción es prácticamente inmediata.

Ahorro de ancho de banda pues sólo se transfiere (descarga) el fragmento de vídeo que visionan los usuarios.

Más protección para sus vídeos, porque el archivo de vídeo no se almacena en el ordenador de los usuarios; por lo tanto, resulta más difícil de copiar.

Desventajas:

Más costoso: requiere de un servidor de medios o CDN (con soporte para streaming). Hay un caso particular conocido como descarga progresiva se descarga un archivo y éste comienza a reproducirse cuando cierto porcentaje del archivo se ha recibido. Esta tecnología combina los beneficios de la transmisión de video por streaming (rápida para reproducir el video) y la descarga de video (alta calidad). Aunque la mayoría de las tecnologías de descarga progresiva de video siguen siendo de propietario, organismos de estandarización están haciendo esfuerzos para incluir descargas progresivas como un nuevo estándar. Ventajas:

Sólo se requiere un servidor Web convencional.

Una vez se ha transferido (descargado) todo el archivo de vídeo, se puede visionar cualquier punto de éste sin esperar (recuerde: el vídeo completo se ha almacenado en el ordenador).

Desventajas:

Para reproducir un punto determinado de un vídeo hay que esperar a que dicho fragmento se haya descargado; así pues, si el vídeo en cuestión dura 30minutos y desea iniciar la reproducción en el minuto 25, deberá esperar... esperar a que haya descargado casi todo el archivo (hasta el minuto 25) para comenzar a reproducir.

Como el archivo de vídeo se descarga en su totalidad, al usuario le resulta muy fácil copiarlo.

Gran desperdicio de ancho de banda, sobre todo cuando se trata de archivos de vídeo muy grandes. ¿Por qué? Vamos a explicarlo con un ejemplo... Suponga que un usuario dispone de una conexión de Internet muy rápida y comienza a visualizar uno de sus vídeos de varios minutos de duración, pero dicho usuario, transcurrido apenas 30sg de visionado, abandona su WebTV o comienza a visualizar otro vídeo. Si la conexión a internet es lo suficientemente rápida, tal vez esos 30seg de visionado bastaron para transferir la totalidad del vídeo de varios minutos de duración, ocasionando un desperdicio enorme de ancho de banda.


98

Comparativa del tratamiento de contenido multimedia en diferentes versiones de lenguajes de marcado de páginas. Las imágenes son un elemento más en las páginas web y permiten aportar diseño (aunque los nuevos estándares llevan a dedicar esta misión exclusivamente al CSS) aunque deberíamos esforzarnos en utilizar imágenes como aportación a los contenidos. El código HTML5 correcto para insertar una imagen en una página web es el siguiente <IMG src="ruta/fichero" width="111px" height="222px" alt="Texto Alternativo"> Las imágenes, definidas como vemos con la etiqueta IMG las relacionaremos bastante con las nuevas etiquetas de HTML5 <FIGURE>, <FIGCAPTION> o <ASIDE>. Una vez que tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el elemento HTML5 <VIDEO>. Su estructura es muy similar a la que empleábamos con las imágenes, aunque en este caso sí lleva etiqueta de cierre. Por ejemplo, <VIDEO src="video/conciertorock.webm"></VIDEO

Las etiquetas <AUDIO> y <VIDEO> proporcionan apoyo para la reproducción de audio y video sin necesidad de plugins. Esto es un gran adelanto para la independencia de las reproducciones de cada uno de los diferentes formatos. Para incrustar un vídeo de HTML5, que trabaje en las nuevas versiones de los principales navegadores, puede usarse el elemento <SOURCE> para reproducir en formatos WebM o el formato AAC MPEG H.264. Por ejemplo, <VIDEO controls>

<source src="videoejemplo.webm" type="video/webm">

<SOURCE src="videoejemplo.mp4" type="video/mp4">

</VIDEO>


99

5.3. Gráficos multimedia

Formatos gráficos. Comparativa. Las imágenes permiten enriquecer la experiencia del usuario buscando la asimilación más fácil y rápida de la información presentada. Los formatos de mapa de bits más usados son JPEG (.jpg), GIF (.gif) y PNG (.png). Para comparar la calidad de cada uno de ellos hay que ver el peso del fichero, los colores y gradaciones, etc. Ejemplo comparando los formatos gráficos,

Puede observarse que la mejor calidad y el menor peso en este tipo de imágenes corresponden al formato JPEG. Le sigue en peso el formato GIF, aunque la calidad de la imagen en muy baja, debido a que este formato sólo puede trabajar con 256 colores. El formato PNG da buena calidad, pero un peso mucho mayor, mientras que el formato BMP da un peso enorme, lo que lo hace muy poco recomendable para su uso en la web. Veamos otro ejemplo donde la imagen presenta pocos colores y gradaciones,

El formato GIF es el que tiene menos peso aportando una calidad aceptable mientras que el formato BMP sigue siendo el más pesado, sin aumento de calidad apreciable. El formato JPEG da buenos resultados también, pero presenta varios inconvenientes en este tipo de imágenes, sobre todo si llevan textos, ya que crea difuminados alrededor de los mismos que desmejoran la imagen. Por su parte, PNG da mayores pesos, que aumentan en relación al número de colores de la imagen y al tamaño de la misma.


100

Para insertar los gráficos vectoriales en la web podemos usar los formatos SWF y SVG. - SWF es el más popular y lo soportan los navegadores más importantes. Permite almacenar imágenes de alta calidad en ficheros de poco peso por lo que podemos presentar páginas web vistosas con útiles animaciones interactivas. En las últimas versiones se ha incluido la posibilidad de agregar formularios. - SVG presenta la dificultad que el escaso soporte por parte de los navegadores les ofrece y la necesidad de instalar un plugin. Estamos ante un formato recomendado por el W3C como futuro estándar para gráficos vectoriales destinados a la web para crear animaciones interactivas. Repositorios de imágenes. Muchas veces tenemos necesidad de usar imágenes en un blog o el propio diseño de una aplicación o página web por lo que si no se dispone de imágenes propias de calidad nos veremos obligados a acudir a internet en busca de esas imágenes. Para poder usar esas imágenes tienen que estar disponibles bajo licencia Creative Commons (CC) o pagar a los autores de las mismas por el uso de imágenes con licencia propietaria. Los símbolos que indican se está usando algún tipo de licencia CC son:

- Google. Para encontrar imágenes libres en Google, hemos de ir a “Búsqueda avanzada de imágenes“ Por ejemplo, una vez hayamos seleccionado la opción anterior, seleccionamos en la nueva pantalla que se nos despliega la opción "derechos de utilización“, y ya tendremos imágenes libres para usar.


101

- Flickr. Este sitio web nos brinda la posibilidad de encontrar miles de imágenes libres (con diferentes tipos de licencia CC).

- En Open Stock Photography tendremos imágenes organizadas por etiquetas que permiten al usuario su descarga, libre uso y redistribución ya que todas ellas se acogen a una licencia Creative Commons. No es un repositorio independiente puesto que redirecciona a la mediateca de la Wikimedia. - Morguefile. Sitio web con miles de imágenes de alta calidad licenciadas bajo licencia CC.


102

Tipos de gráficos: fotografías, imágenes. Fotografías. Una imagen en mapa de bits también conocida como imagen matricial, bitmap o por su extensión .bmp es una estructura o fichero de datos que representa una rejilla rectangular de píxeles o puntos de color, denominada matriz, que se puede visualizar en un monitor, papel u otro dispositivo de representación. A las imágenes en mapa de bits se las suele definir por su altura y anchura (en píxeles) y por su profundidad de color (en bits por píxel), que determina el número de colores distintos que se pueden almacenar en cada punto individual, y por lo tanto, en gran medida, la calidad del color de la imagen. Los gráficos en mapa de bits se distinguen de los gráficos vectoriales en que estos últimos representan una imagen a través del uso de objetos geométricos como curvas de Bézier y polígonos, no del simple almacenamiento del color de cada punto en la matriz. El formato de imagen matricial está ampliamente extendido y es el que se suele emplear para tomar fotografías digitales y realizar capturas de vídeo. Para su obtención se usan dispositivos de conversión analógica-digital, tales como escáneres y cámaras digitales. Imágenes vectorizadas. Este formato de imagen es completamente distinto al formato de las imágenes de mapa de bits, también llamados imágenes matriciales, que están formados por píxeles. El interés principal de los gráficos vectoriales es poder ampliar el tamaño de una imagen a voluntad sin sufrir la pérdida de calidad que sufren los mapas de bits. De la misma forma, permiten mover, estirar y deformar imágenes de manera sencilla. Su uso también está muy extendido en la generación de imágenes en tres dimensiones tanto dinámicas como estáticas. Por ejemplo un círculo de color rojo quedaría definido por la posición de su centro, su radio, el grosor de línea y su color. Todos los ordenadores actuales traducen los gráficos vectoriales a mapas de bits para poder representarlos en pantalla al estar ésta constituida físicamente por píxeles. Iconos. Un icono es una imagen que sustituye a un objeto o a una idea mediante su significado directo, representación o usando algún tipo de analogía. En el campo de la informática, un icono es un pequeño gráfico en pantalla que identifica y representa a algún objeto (programa, comando, documento o archivo), habitualmente con algún simbolismo gráfico para establecer una asociación. Por extensión, el término icono también es utilizado en la cultura popular, con el sentido general de símbolo. Por ejemplo, un nombre, cara, cuadro e inclusive una persona que es reconocida por tener una significación, representar o recoger determinadas propiedades.


103

Herramientas para el tratamiento gráfico. Para manejar imágenes que deseamos insertar en una web (banners, gifs animados, logos, etc.), debemos trabajar con algún software que nos permita crear o modificar imágenes tanto animadas como estáticas. Entre otras operaciones las más habituales en estas aplicaciones es permitir optimizar las imágenes, cambiar su formato o crear imágenes propias para botones o menús de navegación. Existe una gran cantidad de software para este tipo de tareas. Las más conocidas son:

Adobe Photoshop (edición y retoque de imágenes en mapa de bits).

Flash (para crear animaciones).

CorelDraw (para crear imágenes vectoriales).

- Gimp. Es software libre y debido a su magnífico rendimiento está ganando cotas altas de mercado.


104

Tengamos en cuenta que hay que añadir imágenes a nuestras páginas con moderación y siempre buscando que ayuden a comprender el contenido del sitio ya que la sobrecarga de imágenes no es aconsejable de cara al posicionamiento en los buscadores. A los buscadores les gustan las páginas ricas en contenido por lo que las imágenes deben ser como norma general un complemento de la información que se ofrece. Siempre es recomendable aunque tengamos pocas imágenes optimizarlas para que ocupen menos y la página tarde menos en cargar. Optimizar las imágenes básicamente quiere decir reducir su tamaño evitando al máximo la pérdida de calidad. Conversión de formatos gráficos. Las imágenes se almacenan en archivos con diferentes formatos gráficos en función del dispositivo que las ha capturado, de la aplicación con que han sido creadas o de la utilidad con que se desee utilizar. Si una imagen no tiene el formato deseado, puede convertirse a otro formato gráfico. La conversión de imágenes puede llevarse a cabo con multitud de programas. El método más sencillo suele ser:

Hacer doble clic sobre el archivo que contiene la imagen, para que se abra con un editor que reconozca su formato.

Abrir el menú Archivo y utilizar la opción Guardar como o Exportar, para elegir el nuevo formato de archivo.

Existen muchas aplicaciones que convierten formatos gráficos, uno de ellos muy usado es AVS Image Converter 4.0 que convierte imágenes entre JPEG, PDF, RAW, TIFF, GIF, PNG, RAS, PCX, DNG, JPEG 2000, pero también permite redimensionar, girar o aplica efectos posteriormente. 1. Descargar la aplicación de http://www.avs4you.com

http://www.avs4you.com/


105

2. Instalar la aplicación.

3. Abrimos el programa y seleccionamos el archivo a convertir.

La variedad de formatos posibles es muy amplia.

4. Una vez elegido el fichero debemos indicar el formato destino, si deseamos redimensionar y el nombre del nuevo fichero.


106

Podemos incluso establecer marcas de agua y efectos adicionales antes de convertir.

5. No olvidemos indicar el camino de destino.

6. Y por último...


107

5.4. Audio Formatos de audio. Comparativa. Los archivos de sonido con pérdida son aquellos que usan un algoritmo de compresión con pérdida. Se podrá reconstruir tan solo una aproximación a la información original que contenía el archivo. Los archivos de sonido sin pérdida son aquellos que usando o no métodos de compresión, representan la información sin intentar utilizar menor cantidad de la información original. Hacen posible una reconstrucción exacta de la información original. Archivos de sonido con pérdida.

MP3 o MPEG-1 Audio Layer 3: El formato mp3 pueda ser reproducido en casi todos los

reproductores de audio, que sea el formato por excelencia para el intercambio a través de

Internet.

ACC o Advanced Audio Coding: Es un formato de audio digital estándar como extensión de

MPEG-2 comprimido con pérdida, y ofrece más calidad que mp3 y es más estable para un

mismo número de Kbps y un mismo tamaño.

Ogg: Es un formato de audio digital comprimido con pérdida. Normalmente los archivos Ogg

están comprimidos con el códec Vorbis, que es un códec de audio libre que permite una

máxima flexibilidad.

Real Audio o RM: Es un formato de archivo pensado para las transmisiones por Internet en

tiempo real, por ejemplo las radios que emiten online o cuando un servidor tiene un archivo

de sonido almacenado y nosotros lo escuchamos sin que el archivo se cargue por completo ni

se almacene en nuestro ordenador.

WMA o Windows Media Audio: Y está desarrollado básicamente con fines comerciales para

el reproductor integrado en Windows, Windows Media Player. Está por debajo del nivel de

los anteriores formatos.

Archivos de Sonido sin pérdida.

FLAC o Free Lossless Audio Codec: El formato FLAC se suele usar para la venta de música por

Internet, y como alternativa al MP3.

WAV o wave: Waveform Audio Format es un formato de audio digital sin compresión que se

emplea para almacenar sonidos en ordenadores con Windows, es un formato parecido al

AIFF pero tomando en cuenta peculiaridades de Intel. No se usa apenas para compartir

música por Internet, ya que existen otros formatos de audio sin pérdida que reducen mucho

más el tamaño de los archivos.

MIDI: Interface Digital para Instrumentos Musicales, es considerado el estándar para

industria de la música electrónica. Es muy útil para trabajar con dispositivos como

sintetizadores musicales o tarjetas de Sonido.


108

Reproductores de audio. Inserción en navegadores web. Algunos de los reproductores de audio más populares:

JW Player. Popular reproductor de audio y vídeo. Reproduce FLV, H.264/MPEG-4, vídeos de YouTube y MP3 en tu sitio web.

MP3 Player. Reproductor de audio de código abierto, gratis y personalizable.

WP Audio Player. Extensión para Wordpress que permite reproducir música en cada post.

Yahoo! Media Player. Yahoo! Media Player mejora el sitio web o blog mediante la creación

de un reproductor de audio integrado para cada link de música que queramos incluir en

nuestra página, convirtiéndola así en una lista de reproducción. Esto se hace mediante la

adición de código JavaScript en tu página.

Flash MP3 Player. Flash MP3 Player es una aplicación gratuita que permite reproducir música

en el sitio web fácil y rápidamente. Sólo hay que integrarlo en el sitio web y el reproductor

busca automáticamente una carpeta especificada y forma una lista de reproducción.

Enlace o inserción de canales de audio. En HTML 5 tenemos la posibilidad de reproducir audio y video directamente mediante el uso de la etiqueta audio. Un ejemplo de sintaxis de esta etiqueta sería el siguiente: <AUDIO src=”audio.mp3″ type=”audio/mp3″ controls autoplay>


109

A continuación se expone una breve descripción de algunos de los atributos disponibles para esta etiqueta.

src. Indica la ruta del archivo a reproducir.

autoplay. Permite que la reproducción comience de forma automática sin previo aviso. En ocasiones no se recomienda su uso para dejar que el usuario decida cuando reproducir audio cuando lo desee.

autobuffer. Nos permite cargar de forma automática el archivo para que sea más rápida su reproducción a posteriori y reducirlos tiempos de espera para el usuario.

width y height. Definen respectivamente la anchura y la altura que deberá tener la etiqueta de audio.

loop. Ejecuta la reproducción en bucle de forma que al finalizar vuelve a empezar.

controls. Muestra los controles de reproducción.

type. Define el tipo de archivo a reproducir y su extensión (video, audio...)/(mp3, ogg...). Conversión de formatos de audio. Una vez instalado los codecs correspondientes, soporta los siguientes formatos: mp3, mp4, Windows Media Audio (wma), Ogg Vorbis, Real Audio, AAC, Monkeys Audio, FLAC, y muchos otros. Funciona bajo Windows a partir de 98 y NT4, y bajo Linux con el emulador Wine. Otras aplicaciones dedicadas a ayudarnos con el sonido son: - CDex, especializado en la extracción de pistas de audio pero soporta menos formatos.

- Audacity que nos permite convertir y editar música.


110

Herramientas para el tratamiento de sonido. Edición de fragmentos de audio. Las funciones de edición de archivos de audio son similares a la edición de textos. Las operaciones básicas son las de seleccionar, copiar/pegar y borrar.

Seleccionar. Esta acción es una de las más frecuentes y necesaria en la mayoría de las acciones de edición. Se trata de elegir una zona en la pista del archivo de audio para editarla o introducir algún efecto especial.

Forma manual: hacer un clic en la zona inicial y, arrastrando con el cursor presionado, seleccionamos la zona.

Forma automática: mediante un clic nos situamos en la zona inicial y presionando la tecla de las mayúsculas decidimos el límite final de la zona. Automáticamente aparece la zona seleccionada.

Menú: Acciones llevadas a cabo recurriendo a los menús textuales >Menú >Editar >Seleccionar.

Copiar. Una vez seleccionado el fragmento, activamos la tecla correspondiente de copiar y con un toque del cursor nos situamos en la zona donde deseamos pegarla.

Borrar. Seleccionamos el fragmento y activamos la tecla correspondiente. Podemos recuperar lo borrado mediante la acción del menú > Pegar.

Cortar. Seleccionamos y activamos el icono correspondiente. Una de las funciones de borrar y cortar consiste en seleccionar una zona determinada y borrar todo aquello que se encuentre fuera de la misma. Esta acción sólo puede hacerse si utilizamos el icono correspondiente al comando específico de la barra de edición.

Silenciar. En esta operación no eliminamos esa parte del archivo sino que la convertimos en silencio. El silencio es uno de los elementos básicos del sonido. Además de pautar los ritmos, su misión fundamental tiene como objetivo dejar espacio y protagonismo a la imagen, al texto, vídeo o a otro sonido que se inserta en una narración.

5.5. Vídeo Formatos de vídeo. Calidad de vídeo y comparativa. Existen muchos tipos de formatos de video. Aquí se citan algunos de los más utilizados. Asimismo cada tipo de archivo admite en cada momento un códec de compresión distinto. AVI (Audio Video Interleaved = Audio y Video Intercalado).

Es el formato estándar para almacenar video digital.

Cuando se captura video desde una cámara digital al ordenador, se suele almacenar en este formato con el códec DV (Digital Video).

El archivo AVI puede contener video con una calidad excelente. Sin embargo el peso del archivo resulta siempre muy elevado.

Admite distintos codecs de compresión como CinePak, Intel Indeo 5, DV, etc. Los códecs con más capacidad de compresión y una calidad aceptable son DivX y XviD.

El formato AVI puede ser visualizado con la mayoría de reproductores: Windows Media, QuickTime, etc. siempre y cuando se encuentren instalados en el equipo los adecuados códecs para cada tipo de reproductor.

Es ideal para guardar videos originales que han sido capturados de la cámara digital (codificados con DV).

No es recomendable publicarlos en Internet en este formato por su enorme peso.


111

MPEG (Moving Pictures Expert Group = Grupo de Expertos de Películas).

Es un formato estándar para la compresión de video digital.

Son archivos de extensión *.MPG ó *.MPEG.

Admite distintos tipos de códecs de compresión: MPEG-1 (calidad CD), MPEG-2 (calidad DVD), MPEG-3 (orientado al audio MP3) y MPEG-4 (más orientado a la web).

Se reproducen con Windows Media Player y QuickTime. MOV.

Es el formato de video y audio desarrollado por Apple.

Utiliza un códec propio que evoluciona en versiones con bastante rapidez.

Este tipo de archivos también pueden tener extensión *.QT

Se recomienda utilizar el reproductor de QuickTime. Existe una versión gratuita del mismo que se puede descargar de Internet.

Es ideal para publicar videos en Internet por su razonable calidad/peso.

Admite streaming. WMV.

Ha sido desarrollado recientemente por Microsoft.

Utiliza el códec MPEG-4 para la compresión de video.

También puede tener extensión *.ASF

Sólo se puede visualizar con una versión actualizada de Windows Media 7 o superior. Esta aplicación viene integrada dentro de Windows.

Es ideal para publicar videos en Internet por razonable calidad/peso.

Admite streaming. RM.

Es la propuesta de Real Networks para archivos de video.

Utiliza un códec propio para comprimir el audio.

Este tipo de archivos tiene extensión *.RM y *.RAM.

Se visualiza con un reproductor específico: Real Player. Existe una versión gratuita del mismo que se puede descargar de Internet.

Se puede utilizar para publicar videos en Internet por su aceptable calidad/peso.

Admite streaming. FLV.

Es un formato que utiliza el reproductor Adobe Flash para visualizar vídeo en Internet.

Utiliza el códec Sorenson Spark y el códec On2 VP6. Ambos permiten una alta calidad visual con bitrates reducidos.

Son archivos de extensión *.FLV.

Se pueden reproducir desde distintos reproductores locales: MPlayer, VLC media player, Riva, Xine, etc.

Opción recomendada para la web por su accesibilidad. Al visualizarse a través del reproductor de Flash es accesible desde la mayoría de los sistemas operativos y navegadores web.

Los repositorios de vídeo más conocidos en Internet utilizan este formato para la difusión de vídeos: YouTube, Google Video, iFilm, etc.

Permite configurar distintos parámetros del vídeo para conseguir una aceptable calidad/peso.

Admite streaming.


112

Repositorios de vídeo. Actualmente Youtube es el líder en portales con servicio de vídeo en línea. Sin embargo cada vez proliferan más los sitios web de este tipo donde es posible subir y visualizar contenidos de vídeo. En algunos de ellos también se pueden descargar vídeos al disco duro local para visualizarlo con los alumnos en aulas sin conexión a internet y también asegurando la actividad frente a las limitaciones de una conexión modesta. En algunos casos se puede aplicar el plugin Video DownloadHelper de Mozilla Firefox y en otros casos en el mismo sitio se ofrece como alternativa la descarga directa del archivo de video.

A continuación se citan algunos de los servicios de vídeos más conocidos donde se pueden descargar vídeos FLV y MP4 utilizando Firefox + VideoDownload Helper:

TeacherTube.

Metacafe.

MySpace Videos.

Dailymotion.

Vimeo.

Reproductores de vídeo. Inserción en navegadores web. Cada día es más habitual incluir videos y contenido multimedia en nuestras páginas y aplicaciones. La forma más sencilla es siempre utilizar los enlaces de los servicios de video que ofrecen YouTube o Vimeo. En ocasiones no podemos utilizar estos sistemas porque nuestros clientes no quieren usarlos o no encajan en el diseño de nuestra aplicación.


113

En estos casos necesitamos tener el video en nuestro propio servidor. Actualmente la especificación de HTML no soporta video de forma nativa, por lo que tenemos que utilizar un plugin para reproducir el video. Sin duda alguna el producto estrella para estos casos es flash – aunque existen alternativas como Silverlight de Microsoft. Todo esto ha cambiado con la llegada de HTML5 que soporta de forma nativa la reproducción de video a través de la etiqueta <VIDEO>, aunque de momento no todos los navegadores soportan todas las características HTML5. Las versiones más modernas de FireFox, Chrome, Opera y las versiones superiores de Internet Explorer soportan HTML5 en mayor o menor medida. Algunos de los reproductores de video más populares son: - Flowplayer. Hasta la fecha no utiliza HTML5 por lo está completamente basado en flash. Dispone de una buena documentación y es fácil de implementar.

-Sublime. Utiliza HTML5 o flash en el caso de que el navegador no sea compatible. Enlace o inserción de canales de vídeo. Los navegadores actuales son capaces de reproducir videos sin necesidad de plugins como flash, silverlight o similares. ¿Pero cómo se inserta un video en la web para que se pueda ver haciendo uso del soporte de video de HTML5 disponible en los navegadores? Por ejemplo, un código de este estilo, <DIV style="text-align: center"> <VIDEO src="http://URL-video.formato" poster="video" controls="controls" width="500" height="250" preload="none"> </VIDEO></DIV>


114

Con estas líneas insertaríamos la URL del video donde se indica en el formato que queramos de los soportados, algunos de los más usados son MP4, OGV, WEBM etc. y elegiríamos la alineación entre centro, derecha o izquierda según nos convenga. También podemos alterar las medidas del video. Esa línea de código nos insertará el video en nuestra web y éste ya tendrá controles de reproducción y de volumen. También podremos evitar el molesto autoplay de manera que el vídeo solo se reproduzca cuando el usuario quiera verlo. Conversión de formatos de vídeo. Optimización. Existen muchos y variados formatos de vídeo. Sin embargo, todos los reproductores de video no pueden leer todos los formatos. Para solucionar este problema, existen muchos programas que convierten los videos de un formato a otro, veamos el caso concreto de AVS Video Converter, siguiendo los siguientes pasos: 1. Descargar e instalar AVS Video Converter. Desde download.avs4you.com/ y cuando termine la

descarga debe ejecutar el archivo AVSVideoConverter.exe y seguir las instrucciones del programa de instalación.

2. Ejecutar AVS Video Converter y seleccionar un archivo de vídeo de entrada.

Para especificar el archivo de vídeo que desea convertir pulse el botón Navegar... y en la ventana abierta del explorador de archivos seleccione un fichero de vídeo.

3. Establecer parámetros de conversión. Después de seleccionar el archivo de entrada pulse uno

de los botones en la barra de herramientas principal. Sí desea convertir un vídeo y pasarlo a algún dispositivo en concreto puede cambiar a la pestaña Dispositivos en la barra de herramientas principal y seleccionar el botón correspondiente.

En la lista de Perfiles seleccione uno de los perfiles de parámetros predeterminados. Es también posible usar el botón Avanzado para modificar los parámetros del perfil manualmente en la sección Archivo de salida de la pestaña Opciones de conversión.

4. Seleccionar una ubicación para el archivo de salida. Pulse el botón Navegar ubicado al lado del

campo Archivo de salida y seleccione una ubicación en el disco duro para el archivo de salida. 5. Convertir archivos. En cuanto todo esté preparado, pulse ¡Convertir! para iniciar la conversión.

Podrá visualizar el proceso de conversión al hacer clic doble en el botón Avanzado>>.


115

Herramientas de edición de vídeo. Creación de efectos y composición.

Windows Movie Maker. Con Windows Movie Maker podemos añadir texto, títulos, créditos, grabar audio para una narración, juntar varios videos en uno, añadir transiciones y comprimir un video para que ocupe menos espacio.

Windows Live Movie Maker. Podremos subir videos a YouTube desde el mismo programa y convertir el video a varios formatos incluyendo formato de alta definición HD.

Adobe Premiere Elements. Adobe Premiere es el programa de edición de video de la compañía Adobe. La edición Express es una versión ligera del programa profesional. Si quiere darle un toque más elaborado y tener más opciones a la hora de editar su video, este programa es una buena inversión.

HyperEngine-AV. Un programa gratuito (Open Source) para Apple. Se puede decir que es casi un programa a nivel experto. Es muy completo.

5.6. Animaciones multimedia Principios de la animación. Las animaciones en GIF son guardadas imagen por imagen, pero existen animaciones que no se logran así, sino que son interpretadas y compuestas o elaboradas en tiempo real al ejecutarse (como las de formato SWF). Algunos principios básicos de la animación son:

Encoger y estirar (Squash and Strech). La exageración, la deformación de los cuerpos flexibles. Sirve para lograr un efecto más cómico o dramático, según el caso. El estiramiento muchas veces se relaciona con la velocidad y la inercia.

Anticipación (Anticipation). Se anticipan los movimientos, esto guía la mirada del espectador. Anuncia sorpresa. Se verán tres pasos: Anticipación (nos prepara para la acción); la acción en sí misma y la reacción (recuperación, término de la acción).

Puesta en escena (Staging). Poniendo en escena las posiciones claves de los personajes definiremos la naturaleza de la acción. Hay varias técnicas de puesta en escena para contar una historia visualmente, esconder o revelar el punto de interés o las acciones en cadena.


116

Herramientas para la creación de animaciones. Algunas de las principales herramientas disponibles en la web:

Swishmax. Excelente programa para hacer animaciones en flash.

3D Flash Animator. Permite crear animaciones y componentes interactivos en formato Flash, ya sean menús para páginas Web, botones, banners o incluso pequeños juegos.

KoolMoves. Sólo tenemos que hacer nuestros propios diseños con las herramientas de dibujo incluidas en Kool Moves. Con Kool Moves podemos crear fácilmente animaciones de gráficos y texto.

Magpie Pro es una herramienta profesional para la creación de animación en 2D y 3D, especializada en animaciones faciales y sincronización labial, con la que los expertos podrán crear caras animadas en perfecta sincronía con aquello que dicen.


117

Formatos de animaciones.

Gifs animados. Las dos grandes ventajas de los GIF animados es que son increíblemente fáciles de hacer y que son automáticamente reconocidos por los navegadores. Existen multitud de programas para editarlos, crearlos y modificarlos a nuestro gusto. La desventaja es que tienes que mantener la animación bastante sencilla para que el tamaño no crezca demasiado. Cada trama es una imagen de bitmap. Cuatro tramas se pueden enviar por Internet de forma aceptable, pero con 20 o 30 tramas, el tamaño será demasiado grande. Otro problema es que con veinte tramas, el movimiento de los GIF se pueden ver afectados. Las fluidas imágenes que vemos en las películas incluyen al menos 24 imágenes por segundo. Para crear una animación de cierto tamaño, hay que dar saltos grandes entre cada trama, lo cual significa que la animación no será muy fluida. En los GIF animados no se puede integrar sonido.

HTML dinámico. En los comienzos del diseño web se trabajaba básicamente con ficheros estáticos que mostraban información fija. HTML dinámico o DHTML es el término tecnológico que recoge el dinamismo y la nueva interrelación entre usuarios y la propia web. Esto se consigue utilizando lenguajes del tipo Javascript. HTML dinámico no fue creado para desarrollar animaciones aunque mediante la modificación de elementos gráficos puede añadirse movimiento en una página Web. Por ejemplo, un script escrito usando DHTML podría indicarle a un navegador que cambie el sitio de una imagen de particular en la pantalla. Como en el caso de los GIFs animados los navegadores reconocen de forma automática las animaciones DHTML sin tener que descargar componentes adicionales. Esta es una de las claves diferenciadoras. Como punto negativo hay que indicar que crear este tipo de animaciones no es tan fácil como un simple GIF animado. Existen editores HTML que pueden simplificar esta tarea como es el caso de Macromedia Dreamweaver que genera automáticamente el código necesario para insertarlo en nuestro fichero web.

Java. Otra forma de crear animaciones Web es con el lenguaje de programación universal orientado a Internet, Java con el que los programadores pueden crear aplicaciones que los usuarios pueden descargar de Internet. Los navegadores con Java habilitado, usan una máquina virtual, que es un software que reconoce el lenguaje Java y los traduce para el sistema operativo del usuario. La principal ventaja de Java, es que funciona en todos los sistemas operativos y es muy flexible pero presenta una desventaja muy destacada y es que puede suponer un problema de seguridad en nuestro ordenador.


118

Flash y Shockwave. Las animaciones más populares son Flash y Shockwave (ambas de Macromedia). Flash es ahora el formato estándar para animaciones de calidad en la Web, y Shockwave es un formato muy popular para presentar contenido animado más complejos.

Estas dos tecnologías aparecen como parte de la Web e incluyen un alto nivel de interactividad. Con Shockwave no sólo podremos mostrar animaciones sino que se permitirá parte de control al usuario para responder con el navegador. Las diferencias principales entre estas dos aplicaciones son:

Los ficheros Flash se descargan más rápido que los ficheros Shockwave.

Se puede usar más tipos de ficheros con Shockwave. Por ejemplo, se puede importar un fichero Flash a Shockwave, pero no al revés.

Flash es está más extendido. Más del 90% de usuarios en Internet tienen la aplicación para poder visualizar Flash en sus ordenadores.

El software para hacer diseños Flash es más barato que el utilizado para Shockwave.

Flash es un formato de código abierto. Cualquiera puede ver cómo funciona y lo puede adaptar para sus propios proyectos.

Inclusión en páginas web. Hay que tener en cuenta que el archivo debe tener la extensión .swf, no valen archivos .fla o .swi o cualquier otro formato, debe ser siempre .swf. Debemos copiarlo en el mismo directorio donde tenemos los ficheros HTML y de esta forma simplificar el proceso. No debemos indicar el código exactamente donde queremos que aparezca la animación.


119

Por ejemplo este código que recoge la acción del fichero archivo.swf,

Con este código, si un usuario no tuviese el plug-in necesario para reproducir animaciones flash este código le indicaría donde bajarlo.

Animaciones jQuery para html5. La aparición hace unos años del jQuery y CSS3, unido a las mejoras introducidas cada día en las velocidades de conexión están dando un vuelco al concepto del diseño web que ya toma como definitiva la separación de contenido y diseño y apuesta firmemente por el uso de las hojas de estilo en cascada.

Con un poco de imaginación y atractivos diseños, sin olvidar la usabilidad, podemos conseguir aplicaciones vistosas y funcionales donde ya no hace falta hacer clic en un botón para realizar una acción y establecer la interacción con el usuario. Veamos algunos ejemplos, http://headlampcreative.com/

http://headlampcreative.com/


120

http://www.driftboys.com/

Seré necesario conocer herramientas Jquery como el plugin OnePageScroll que permite crear una navegación vertical sutil a cada una de las secciones de una página dónde podríamos realizar animaciones con propiedades CSS transformadoras del estilo transform de CSS que nos van a permitir hacer cambios a los objetos del documento al que le apliquemos este estilo. Las propiedades CSS que nos va permitir hacer las siguientes transformaciones a los elementos son translate (traducir), rotate (rotar), scale (escalar) o skew (sesgar), efectos que antes era imposible hacer con CSS y para usarlos en la web teníamos que utilizar exclusivamente flash o javascript. Buenas prácticas en el uso de animaciones.

Añadir valor. Antes de comenzar el diseño de su animación Flash, pensar en cómo esto añade valor a sus visitantes. Puede ser algo informativo, educativo o simplemente algo divertido relacionado con el servicio o producto. No debemos dejar de proporcionar también la información pertinente en formato de texto. Sin embargo, la animación no debe distraer de su objetivo: encontrar la información que desea o comprar algo.

Carga rápida. Crear una animación que se carga rápidamente y no espera. Y tenga en cuenta que no todo el mundo tiene una línea con una conexión potente. Por ejemplo, probar con una mala conexión, una tarjeta 3G.

Abrir las páginas sin necesidad de digitalizar vídeos, sonidos o música. Sin embargo, encontramos, en ocasiones, los sitios que nos saludan con una música de fondo. No es muy agradable de escuchar, de repente, el sonido de nuestra música que se mezcla con otra. O alguien que empieza a hablar sobre el producto o el producto B. Por ejemplo, si la animación incluye sonido, proporcionar controles para el usuario para iniciar y parar la animación.

Tamaño de la animación. Escala de la altura y la anchura dependiendo de la intensidad de la animación para evitar una carga para el procesador.

http://www.driftboys.com/


121

Una animación de un tiempo. Si una animación ya está afectando a la concentración del visitante, es fácil imaginar lo que causa múltiples animaciones al mismo tiempo, todos menos garantizar una lectura relajada.

Repita los intervalos de animación. Cuando se abre una página con la animación, el espectador está en busca de algo que suceda, con la esperanza de encontrar algo interesante y útil. Pero después de regresar al inicio o estar interesado en otro tipo de contenido tendrá que ver el espectáculo sin querer.

Menús de destello de navegación. No estamos hablando de contenido, sino de elementos de navegación (controles). La mayoría de los problemas de usabilidad surgen de los problemas de navegabilidad. Sitios web y tiendas online venden el 40% por debajo de su potencial de problemas de usabilidad. Menús (siempre mostrando la misma información, independientemente de si estamos en el tema o el tema B. Los menús y los botones de navegación que aparece "volando" en la pantalla y permiten esperar unos segundos hasta que encontraron su lugar definitivo, etc.

La pantalla pertenece al usuario. Este viejo principio es posiblemente el más importante para las personas que diseñan sitios web, tiendas online y otras aplicaciones informáticas: La pantalla pertenece al usuario. Para muchos puede ser triste pero cierto. Es él quien controla la forma en que desea utilizar la pantalla (y todo el equipo, incluido el uso de ancho de banda para acceso a Internet), el tamaño de fuente que utiliza, el ancho de la página del navegador, si quiere ver una película, escuchar un música, entre otras cosas.

5.7. Elementos interactivos Creación de elementos interactivos. Una página Web puede tener distintos tipos de elementos interactivos y multimedia. Ambos tipos de elementos pueden darle vida a una Web, pero utilizar en exceso esta clase de elementos hará que la carga de nuestra Web sea lenta y engorrosa, por lo que los visitantes podrían perder el interés. Por lo tanto, hemos de usarlos con mesura. Existen objetos que son una mezcla de ambos, como son las animaciones Flash. Estas animaciones pueden incluir sonidos e imágenes, y además ser interactivas. Un problema común, además de la lentitud de carga, es la compatibilidad. No todos los efectos son soportados por todos los navegadores, en especial por los navegadores más antiguos. FrontPage nos ofrece algunas ayudas para resolver este problema. En general, si un navegador no soportara un efecto en particular, sencillamente lo ignora, por lo que en general nuestra Web podrá seguir siendo visitada, aunque sin ese efecto.


122

Mapas Interactivos. El avance en el terreno tecnológico y, en especial, en el campo de la informática, brinda al todo el conjunto de la sociedad numerosas posibilidades que facilitan tareas cotidianas la vida diaria. Uno de estos progresos es la creación de mapas interactivos, los cuales facilitan todo tipo de información de una manera sencilla. Pero, ¿qué es un mapa interactivo? Las dos principales diferencias respecto a los mapas tradicionales consisten en que, por un lado, la interactividad permite escoger ver sólo aquellas características relevantes para su usuario, y por otro, es necesario un dispositivo electrónico para ser utilizados, como un ordenador o un teléfono móvil. Por ejemplo, tomando como muestra un mapa turístico, la persona que lo consulte tiene la opción de escoger la vista de los espacios culturales y los servicios de restauración de una zona sin que aparezcan, por ejemplo, los centros comerciales. Las posibilidades de elección son numerosas y cada usuario es el que decide, dentro de las opciones a visualizar, aquellos aspectos que le interesan y cuáles no.

Una capa podría mostrar la oferta cultural de una ciudad, otra sus restaurantes o los teatros de la misma. Todas ellas tienen una capa base, en este caso el plano de la ciudad en cuestión. Ámbitos de uso. Google Map permite ver el mundo bien a modo de mapa tradicional, o bien como una imagen desde un satélite. Su buscador permite localizar en ambos casos direcciones, comercios y otros puntos de interés en el plano. Otro ejemplo es el usado por muchas páginas de información turística para determinar la situación de lugares relevantes para el visitante. De este modo permiten escoger las opciones que se necesiten contemplar en un momento determinado. También existen mapas que, incorporados a una página web, muestran cuántas personas se encuentran en ese momento navegando en ella y la procedencia de las mismas. Existen muchos modelos de mapas interactivos, pero sin duda la principal característica de todos ellos es la incorporación de información que tradicionalmente podía suponer una labor complicada de encontrar o, simplemente, no se disponía de ella con facilidad.


123

Por ejemplo, uno de los mapas interactivos con mayor uso por los usuarios de Internet es el que proporciona Google con su servicio Google Maps.

Recuerda… Los navegadores actuales son capaces de reproducir videos sin necesidad de plugins como flash. Los códecs DivX y XviD tienen bastante capacidad de compresión y una calidad aceptable y son admitidos en los ficheros AVI. La mayoría de los problemas de usabilidad surgen de los problemas de navegabilidad. RMVB es un formato creado en exclusiva para la web. El formato 3GP permite su uso en dispositivos móviles. Para ver vídeos en Flash necesitamos un plugin. Un icono es una imagen que sustituye a una idea sando algún tipo de analogía. SVG es un formato que presenta la necesidad de instalar un plugin. SVG consigue rivalizar con Macromedia Flash en términos de potencialidad. Si un navegador no soportara un efecto en particular, no se bloquea la descarga del sitio web. Que un sitio sea validado por la W3C significa que esa web no posee errores de sintaxis. Los Frameworks son entornos que aportan soporte de programas, bibliotecas, y un lenguaje interpretado para juntos desarrollar y unir los diferentes componentes de un proyecto. El RealPlayer es un reproductor de multimedia que reproduce varios formatos multimedia, incluyendo las generaciones múltiples de los codecs de RealAudio? Se denomina Applet el componente de una aplicación que se ejecuta en el contexto de otro programa como puede ser un navegador web. Las cadenas son tipo de variable que se utiliza para almacenar caracteres, palabras y/o frases de texto.