ERROR: Unidad 4. Caso práctico 7. HTML 5.

Aprovechando vuestr@s consultas sobre este caso práctico que están haciendo nuestr@s alumn@s estos días, para comentar algunos errores detectados:

1. Hay que tener el JRE de Java instalado en la maquina, para poder descargar el vídeo con la herramienta web Keepvid. Puedes descargarte java desde esta web: https://www.java.com/es/download/
2. La página HTML5 funciona con las últimas versiones de los navegadores que ya soportan este estándar, con chrome siempre funciona. Igual con otro navegador sino esta actualizado puede que no funcione. 

Si detectáis algún problema más, no dudéis en comunicarlos.

Caso práctico 7. HTML 5.

Tiempo: 15 min.

Dificultad: Fácil.

Objetivos: Crear una página web con elementos multimedia.

Vamos a ver un sencillo ejemplo de página web que utilice etiquetas HTML5 para incrustar elementos multimedia.

1. Obtención de los vídeos.
Puedes utilizar vídeos que hayas grabado tú mismo desde tu móvil, o descargar algún vídeo desde cualquier portal, como Youtube. En nuestro caso, vamos a descargar un tutorial de HTML5 desde Youtube. Para ello, vamos a utilizar la herramienta web Keepvid (http://keepvid.com), aunque puedes utilizar cualquiera para la descarga de vídeos/audio, como ClipNabber.

Para ello, accedemos a Youtube y buscamos el vídeo que deseamos. Copiamos la URL (en nuestro caso http://www.youtube.com/watch?v=mzPxo7Y6JyA), y la pegamos en la caja de texto de Keepvid, pulsamos Download y pulsamos en Aceptar sobre el applet de java que se encargará de la conversión.

Hecho esto, nos aparecerá una sección en la página con los diferentes tipos de fichero que podemos descargar.

U4

Descargaremos el vídeo en formato WebM y en MP4, a la resolución que deseemos.

Please report any issues to: contact@keepvid.com

What is HTML5?
youtube.com / TopicSimple
1:33

» Download 3GP « - 144p

» Download 3GP « - 240p

» Download FLV « - 240p

» Download MP4 « - (Max 480p)

» Download MP4 « - 720p

» Download MP4 « - 144p (Video Only)

» Download MP4 « - 240p (Video Only)

» Download MP4 « - 360p (Video Only)

» Download MP4 « - 480p (Video Only)

» Download MP4 « - 720p (Video Only)

» Download M4A « - 128kbps (Audio Only)

» Download WEBM « - 360p

» Download MP3 « - using ( SnipMP3.com )

*NEW* » Download SRT « - Subtitles - using ( KeepSubs.com )

Podemos hacer clic también en la descarga del fichero MP3 utilizando SnipMP3, o utilizar cualquier archivo de audio que dispongas.

Ten en cuenta que si el navegador no admite ficheros mp3, puedes utilizar herramientas como soundconverter o audacity para realizar la conversión.

What is HTML5?

http://youtu.be/mzPxo7Y6JyA

2. Creación de la página web.
Una vez tengamos los archivos descargados y preparados, los copiamos a una carpeta en nuestro home, que llamaremos html5, y creamos en ella un fichero llamado index.html con el siguiente contenido:

   

   




   

Ejemplo de página con HTML5

    Vamos a ver un vídeo sobre HTML5:


   

  

    Y su correspondiente audio:


   

  

   

Puedes observar algunos detalles:

• El elemento vídeo permiten especificar el ancho y alto en que éstos se
• Tanto el elemento vídeo como audio, deben
• Como ves, podemos añadir varios sources 

Reproducirán con los parámetros width y height. Además, la etiqueta controls, permite añadir controles de reproducción (pausa, reproducir,etc.), junto con el vídeo.

Tener anidado el elemento source, en el que indicaremos el fichero a reproducir mediante el atributo src y su tipo, mediante type. Dentro de las etiquetas vídeo y audio. Con esto, permitimos que el navegador utilice un source u otro en función de sus posibilidades. Por ejemplo, en nuestro caso, si no admite el formato webm, utilizará el fichero mp4, y si no admite ninguno nos mostrará el mensaje “Tu navegador no admite la etiqueta vídeo o los formatos utilizados”.

Y hasta aquí esta entrada sobre el ERROR: Unidad 4. Caso práctico 7. HTML 5.

ENLACES RELACIONADOS

HTML - HTML 5

YouTube
U4


DIÁLOGO ABIERTO

Esperando que os sea de interés y os aporte algo. ¿Nos gustaría saber si te ha gustado esta entrada? ¿Estas en esta unidad actualmente? ¿Y habían hecho este Caso Práctico tus alumn@s? Gracias por seguirnos y leernos. Hasta el próximo artículo...

¿Me regalas un tuit o tweet de esta entrada? Gracias por compartirla...

CEO Unidad 1 + Anexos CP 11

Hoy aprovecho para recordar el acceso al CEO de los alumnos, y en concreto los documentos extra de la unidad 1. Así como advertiros que hay un archivo comprimido para el caso práctico 11 que no esta en el CEO, sino aquí en anexos como puede ver al final de esta entrada.

 

http://www.mhe.es/ceo_link.php?tipo=2_02_XX2&isbn=8448183924&sub_materia=334&materia=8&nivel=C&comunidad=Castellano&ciclo=0&portal=&letrero=&cabecera=

Os dejo aquí una copia del enlace:

	- Acceso al Centro del Estudiante

 http://www.mhe.es/cf/ciclos_informatica/8448183924/archivos/logo.html

Para esta primera unidad 1 tenéis disponibles 31 documentos:

 

 Pero se ve que se nos olvido poner en el CEO el archivo necesario para realizar el caso práctico 11 de esta unidad, por lo que hemos añadido un espacio de anexos en la web oficial de acceso al CEO.

 http://www.mhe.es/ceo_link.php?tipo=2_02_AE2&isbn=8448183924&sub_materia=334&materia=8&nivel=C&comunidad=Castellano&ciclo=0&portal=&letrero=&cabecera=

Os dejo el enlace aquí también

	- Unidad 1.- Caso práctico 11

Perdonar por las molestias, pero ya esta disponible este recurso.

ENTRADAS RELACIONADAS

Web Oficial 2ª Edición AW

Infografías 2ª Edicion del libro de Aplicaciones Web

  Todas sobre Unidad 1 - http://smrweb2.blogspot.com.es/search/label/U1

DIÁLOGO ABIERTO

Como siempre, para terminar, nos gustaría saber tu opinión sobre la entrada. ¿Estabas buscando este archivo? recuerda que siempre puedes contactar con nosotros (al correo smrweb2 arroba gmail punto com) o con la editorial al departamento de atención al cliente  ¿Cuántos documentos extra has utilizado?  ¿Echas en falta alguno más? Gracias por seguirnos y hasta la próxima...

[AW-U1-CP11] Instalación de un servidor eyeOS 2.5

Me imagino que estaréis acabando de impartir la unidad 1, sino lo habéis hecho ya a estas alturas, gracias a las consultas del compañero Miguel R. de Torrent (Valencia) desde el equipo preventas de eyeOS (ya os hablamos de sus creadores en una entrada anterior Jóvenes extraordinarios: Creadores de eyeOS)
nos han reportado los siguientes comentarios para poder realizar el caso práctico 11 de la página 37-38.

No debería existir ningún problema sobre Ubuntu 10 y el stack LAMP de Bitnami. De cualquier modo, te remito a una explicación detallada del proceso de instalación en el blog de uno de nuestros administradores de sistemas:

http://bashlines.com/2011/04/16/instalar-eyeos2-4-en-debian6/

Aunque veas que habla de eyeOS 2.4 y Debian 6 en el título las instrucciones son exactamente las mismas para eyeOS 2.5 sobre Ubuntu. Sólo cambiará la última parte, que en lugar de "eyeos-2.4.tar.gz" será el archivo comprimido (eyeos-2.5.tar.gz) que te descargarás de aquí: http://sourceforge.net/projects/eyeos/files/eyeos2/eyeos-2.5.tar.gz/download

Esperamos que siguiendo estas indicaciones, también consigáis instalar en local sobre el LAMP de bitnami el eyeOs.

Por otro lado, hemos contactado directamente con un directivo para ver la posibilidad de tener empaquetado y preconfigurado dentro de un modulo de bitnami, a lo que nos han contestado que lo estudiaran. Ya que en estos momentos están trabajando con la última versión Open Source la 2.5 y su siguiente evolución que es la Professional Edition a la que se puede acceder por professional.eyeos.org. Nos animan a que lo probemos también.

Os dejo una copia de una entrada Juan Diego Polo que habla sobre estas novedades en su Google+ 

En el blog de eyeOs anuncian eyeOS Professional Edition, una solución para empresas que pretende facilitar la vida del administrador del sistema mediante el desarrollo de un software con potentes herramientas de administración y un completo conjunto de conectores para integrarse con el entorno de IT de la compañía, integrando SaaS existentes, aplicaciones legacy virtualizadas o otras apps in-house servidas como servicios web.
En lo que a novedades se refiere anuncian:

eyeRun: ejecuta los archivos guardados en la nube con aplicacions locales (p.e. Office, Photoshop, etc.)
eyeSync: sincroniza los archivos entre la nube y el dispositivo local para poder trabajar fuera de conexión
Mobile: trabaja con eyeOS desde cualquier dispositivo móvil
Compartición de archivos: Trabaja de forma colaborativa con usuarios de la plataforma o comparte archivos fuera de ella mediante URL
Virtual Appliance: trabaja con un paquete que incluye todo el entorno necesario para hacer funcionar eyeOS en un entorno de virtualización
Admin Panel: intuitivo y fácil de usar para beneficiar el trabajo de gestión de usuarios del Administrador de Sistemas
Active directory connectivity/LDAP: Para una perfecta integración con el directorio de la empresa
Chat de grupos: habla dentro de eyeOS con otros usuarios
Calendario colaborativo: comparte el calendario con los compañeros de trabajo

Un muy importante paso para este proyecto que apuesta por el código libre, habiendo ayudado a muchos a integrar su negocio en la nube.
Podéis obtener más información en blog.eyeos.org

Por último, comentaros que dentro de un programa de Comando Actulidad de RTVE, se emiten 7 minutos donde se explica como ha surgido y como ha evoluacionado eyeOS en estos años, os recomiendo que os lo mireis y se lo pongais a vuestros alumnos en clase.

Trabajar como desarrollador

Vivir y trabajar en eyeOS

[AW-U4-CP2] Nuevo enlace de la extensión del lenguaje Español en Joomla 1.5.22

Continuando con la unidad 4 de JOOMLA! comentar que en el caso práctico 2, si utilizáis los archivos del CD. El caso práctico se realiza siguiendo las indicaciones del libro, pero si vuestros alumnos van a coger a esta web:


http://extensiones.joomlaspanish.org/component/option,com_remository/Itemid,27/func,fileinfo/id,123/

El último archivo disponible de español es este que contiene los dos en un único archivo fusionado:

09.10.10 Pack idioma es-ES_Joomla_1.5.21_front_admin

Una vez este archivo lo tengas descargado a vuestro disco duro, no hace falta descomprimirlo. Se ha de seleccionar directamente comprimido para que sea instalado.

Una vez instalado y seleccionado como idioma por defecto, sino aparecen automáticamente el cambio de idioma, tal vez tengas que cerrar la sesión de administración y volverla a abrir para que se apliquen los cambios y ya nos salgan los textos en Español.