En este tutorial aprenderás a crear una galería de youtube para Mobincube. La galería está creada en formato HTML con unos detalles en CCS. Cabe destacar, que es de tipo responsive para que pueda adaptarse a cualquier dispositivo móvil. Es importante resaltar, que en esta galería puedes compartir videos de tu propiedad como videos de otros canales de youtube, siempre y cuando quede completamente explícito el autor del video utilizado.
Lo que encontrarás en este artículo:
- Programas Android utilizados para crear la galería de Youtube en HTML y Programas Recomendados para crear la Galería de Youtube en PC
- ¿Cómo se ha creado la galería de Youtube en HTML?
- Pasos para crear la aplicación de Mobincube con la Galería de Youtube
- Preguntas Frecuentes
- Lecturas Recomendadas
Programas Android utilizados para crear la galería de Youtube en HTML y Programas Recomendados para crear la Galería de Youtube en PC
Para crear el código he utilizado mi smartphone Xiaomi Redmi 7A con android 9. Por ello, como editor HTML he utilizado el programa llamado Amwriter. Es un programa completamente gratuito y fácil de utilizar. Para crear el archivo .zip he descargado el programa llamado WinZip. Ambos programas los puedes descargar fácilmente del Play Store, totalmente gratuitos. Si tuviese la opción de utilizar una computadora, sin duda como editor HTML descargaría el Adobe Dreamweaver. Es mi programa favorito porque te permite visualizar los cambios que realizas en el código de forma inmediata, además tiene la alternativa de mostrarte la previsualización adaptada a la pantalla de un dispositivo particular (móvil, escritorio, tablet). Sin embargo, hay cientos de opciones gratuitas tanto de descarga como online, que son completamente válidas, porque el código utilizado para Mobincube es muy sencillo de manejar.
Para crear el código he utilizado mi smartphone Xiaomi Redmi 7A con android 9. Por ello, como editor HTML he utilizado el programa llamado Amwriter. Es un programa completamente gratuito y fácil de utilizar. Para crear el archivo .zip he descargado el programa llamado WinZip. Ambos programas los puedes descargar fácilmente del Play Store, totalmente gratuitos. Si tuviese la opción de utilizar una computadora, sin duda como editor HTML descargaría el Adobe Dreamweaver. Es mi programa favorito porque te permite visualizar los cambios que realizas en el código de forma inmediata, además tiene la alternativa de mostrarte la previsualización adaptada a la pantalla de un dispositivo particular (móvil, escritorio, tablet). Sin embargo, hay cientos de opciones gratuitas tanto de descarga como online, que son completamente válidas, porque el código utilizado para Mobincube es muy sencillo de manejar.
¿Cómo se ha creado la galería de Youtube en HTML?
Hemos diseñado una tabla invisible para crear un conjunto de celdas que contendrán tanto el vídeo de Youtube como una descripción y titulo de cada video. Cada celda tiene dos formatos, por ello una celda tiene como clase el nombre de "video" y la otra no tiene clase. La celda con la clase video se encarga de centrar el video de Youtube y agregarle un fondo de un tono gris claro, para diferenciarlo de las celdas que contienen la descripción del video.
Para cambiar el tono de la celda, ubicamos el estilo del td en la parte de la cabeza del código. En background-color cambiamos el color por el de nuestro gusto. Para conseguir los tonos, se utiliza el HTML Color Picker que trae Google por defecto. Se copia y pega el código del color que les guste. De todas maneras, para facilitar su comprensión he agregado dentro del código el comentario respectivo para que ubiquen dónde se cambia el color de fondo.
En cuánto a agregar el video de Youtube se refiere, es importante accesar a Youtube desde un navegador, puesto que es donde ofrece la opción de insertar el video. Copiamos el código y luego de pegarlo, eliminamos las etiquetas llamadas "width" y "height" (con sus valores). Esto hará que el video de Youtube se adapte al tamaño de la celda, por lo que se ajustará independientemente si la aplicación es instalada en un dispositivo móvil o una tablet.
Un aspecto importante, comprender que la etiqueta h1 se refiere al titulo del video. El tamaño y el estilo de esta etiqueta viene definido por defecto en cada dispositivo. Si a tu gusto está muy grande el texto, puedes ir disminuyendo su tamaño aumentando su numeración, ejemplo: h2, h3, h4. Tomando siempre la precaución de cambiar la enumeración tanto en la etiqueta de apertura como en la de cierre. Ejemplo:
A mi parecer, una galería puede tener como máximo 5 videos en una pantalla, para que cargue en un tiempo relativamente rápido. Es cuestión de gustos, pueden agregar cuantas celdas quieran, con la cantidad de videos que consideren necesarios para su aplicación. Pero, tomen en cuenta el punto de vista del usuario, si tarda mucho tiempo en cargar una pantalla, pueden pensar que la app es lenta y eliminarla. Para evitarlo, pueden agregar varias galerias en una misma aplicación. Pero haré incapié, es sólo mi punto de vista, no hay una regla escrita que exija un límite en los videos a usar en una galería.
Por último, debes guardar tu archivo HTML con el nombre de "index.html". De lo contrario, Mobincube te dará errores como "net::ERR_FILE_NOT_FOUND" porque se traduce como que buscó dentro de tu carpeta .zip pero no encontró el archivo index.html. Por eso siempre hago incapié en este detalle, el archivo HTML es el que debe llamarse index. La carpeta zip como tal puede tener cualquier nombre.
El código HTML con sus comentarios y listo para que agreguen sus videos es el siguiente:
El código con los vídeos y texto de ejemplo:
Hemos diseñado una tabla invisible para crear un conjunto de celdas que contendrán tanto el vídeo de Youtube como una descripción y titulo de cada video. Cada celda tiene dos formatos, por ello una celda tiene como clase el nombre de "video" y la otra no tiene clase. La celda con la clase video se encarga de centrar el video de Youtube y agregarle un fondo de un tono gris claro, para diferenciarlo de las celdas que contienen la descripción del video.
Para cambiar el tono de la celda, ubicamos el estilo del td en la parte de la cabeza del código. En background-color cambiamos el color por el de nuestro gusto. Para conseguir los tonos, se utiliza el HTML Color Picker que trae Google por defecto. Se copia y pega el código del color que les guste. De todas maneras, para facilitar su comprensión he agregado dentro del código el comentario respectivo para que ubiquen dónde se cambia el color de fondo.
En cuánto a agregar el video de Youtube se refiere, es importante accesar a Youtube desde un navegador, puesto que es donde ofrece la opción de insertar el video. Copiamos el código y luego de pegarlo, eliminamos las etiquetas llamadas "width" y "height" (con sus valores). Esto hará que el video de Youtube se adapte al tamaño de la celda, por lo que se ajustará independientemente si la aplicación es instalada en un dispositivo móvil o una tablet.
Un aspecto importante, comprender que la etiqueta h1 se refiere al titulo del video. El tamaño y el estilo de esta etiqueta viene definido por defecto en cada dispositivo. Si a tu gusto está muy grande el texto, puedes ir disminuyendo su tamaño aumentando su numeración, ejemplo: h2, h3, h4. Tomando siempre la precaución de cambiar la enumeración tanto en la etiqueta de apertura como en la de cierre. Ejemplo:
See the Pen Tamaños de los títulos by Violeta S. (@leonvioleta4) on CodePen.
A mi parecer, una galería puede tener como máximo 5 videos en una pantalla, para que cargue en un tiempo relativamente rápido. Es cuestión de gustos, pueden agregar cuantas celdas quieran, con la cantidad de videos que consideren necesarios para su aplicación. Pero, tomen en cuenta el punto de vista del usuario, si tarda mucho tiempo en cargar una pantalla, pueden pensar que la app es lenta y eliminarla. Para evitarlo, pueden agregar varias galerias en una misma aplicación. Pero haré incapié, es sólo mi punto de vista, no hay una regla escrita que exija un límite en los videos a usar en una galería.
Por último, debes guardar tu archivo HTML con el nombre de "index.html". De lo contrario, Mobincube te dará errores como "net::ERR_FILE_NOT_FOUND" porque se traduce como que buscó dentro de tu carpeta .zip pero no encontró el archivo index.html. Por eso siempre hago incapié en este detalle, el archivo HTML es el que debe llamarse index. La carpeta zip como tal puede tener cualquier nombre.
El código HTML con sus comentarios y listo para que agreguen sus videos es el siguiente:
El código con los vídeos y texto de ejemplo:
See the Pen Ejemplo de Galería de Youtube Para Mobincube by Violeta S. (@leonvioleta4) on CodePen.
Pasos para crear la aplicación de Mobincube con la Galería de Youtube
- Crear una cuenta en mobincube (en caso de no tenerla aún).
- Crear una aplicación (en caso de que aún no hayas creado un nuevo proyecto).
- Crear una nueva pantalla de tipo web.
- Subir el archivo .zip creado previamente, recordando que el código se llama index.html.
- Generar la previsualización para comprobar que todos los detalles están correctos.
- Satisfechos con el resultado, puedes publicar la app. De lo contrario, revisa el código, corríge, crea una nueva carpeta zip, vuelve a subirla y previsualizas nuevamente.
Preguntas Frecuentes
-
¿Cuántas galerías de Youtube puedo agregar en una aplicación?
Puedes agregar cuántas galerías desees, porque en Mobincube no hay un límite de pantallas por aplicación. -
¿Por qué en la previsualización de la aplicación recibo el mensaje de error "net::ERR_FILE_NOT_FOUND"?
Esto se debe a que no encontró el archivo index.html en tu carpeta zip. Debes revisar que el archivo html se llame index porque de lo contrario, mobincube no lo agregará como una pantalla de tu aplicación. Una vez que tenga el nombre correcto, se previsualizará correctamente tu aplicación. -
¿Puede ser la descripción del vídeo muy larga en la galería de Youtube?
La descripción del video no tiene ninguna limitación. Puedes escribir el texto cuán largo como gustes o puedes no escribirle descripción. En realidad le hago un espacio para la descripción, para que haya una parte del autor de la aplicación donde pueda conectar con sus usuarios mas allá de la parte visual que genera el video.
Lecturas Recomendadas
- Tutorial de Mobincube: aprenderás cómo crear originales aplicaciones para Android e Ios sin tener previos conocimientos de programación.
- Herramientas para desarrolladores de aplicaciones móviles: la mejor selección de libros y herramientas para desarrolladores móviles, desde nivel principiante hasta profesionales experimentados.
- HTML5 para mentes maestras: guía al lector paso a paso en el desarrollo de sitios y aplicaciones web. Luego de leer este libro sabrá cómo estructurar sus documentos con HTML, cómo otorgarles estilos con CSS, y cómo trabajar con las más poderosas APIs de JavaScript.
No comments:
Post a Comment