Proyecto Open Website.

En esta nota queremos presentarte el proyecto Open Website. Este proyecto consiste en montar pequeño sitio web en conjunto con la plataforma Cinematico preconfigurada. El sitio web del que hablamos esta disponible en: http://vivalleytv.ml

El objetivo principal de este proyecto es el educativo, creemos que al ofrecer un sitio como el de Vivalleytv.tk podemos crear en los estudiantes interés en aprender a crear sitios web, sobre todo porque usamos uno de los elementos más comunes entre los jóvenes de hoy que es el video.

Uno de los objetivos primordiales es que los estudiantes puedan interactuar con el entorno del cPanel, ya que hay muchas aplicaciones que nos permiten crear sitios web de manera muy sencilla sin embargo limitan mucho el aprendizaje de todo lo que hay detrás de la administración de un sitio web.

Vivalleytv.tk es una copia menos elaborada del sitio Vivalleytv.gzpot.com, este sitio lo hemos definido como un canal de televisión ya que en el puedes ver series y animaciones que son transmitidas gratuitamente por Youtube, solo que en este sitio implementamos la plataforma Cinematico la cual nos permite integrar a nuestro sitio video que es alojado en Youtube.

Antes de empezar es necesario tener una cuenta en Smart Free Hosting y haber creado un sitio para que podemos subir y configurar nuestro sitio.

Pasos previos para replicar el Open Website en tu sitio.

Paso 1. Descargar el archivo del sitio principal vivalleytv.

Descargar sitio Vivalleytv Frontend.zip

Paso 2. Descargar el archivo con la plataforma Cinematico Preinstalada para VivalleyTV.tk

Descargar Openwebsite.zip

Una vez que hayamos descargado estos archivos solo vamos a descomprimir el archivo llamado Vivalley Frontend.zip el cual contiene un archivo llamado vivalleytv.tk_project.sitebuilder, a continuación veremos que hacer con estos archivos que hemos descargado.

Creando la página principal.

Para crear el sitio principal de nuestro open website haremos lo siguiente:

En nuestro Smart cPanel ubicaremos la sección Website y ahí elegiremos la opción Zyro Builder.

Al entrar a Zyro Builder debemos elegir cualquier plantilla para entrar al editor de sitios web y desde ahí iremos a la opción de publicar para elegir la opción de Respaldar/Restaurar como lo indica la siguiente imagen.

Al hacer lo anterior nos saldrá una ventana desde la cual elegiremos la opción de Restaurar, ahí subiremos el archivo vivalleytv.tk_project.sitebuilder el cual esta contenido en el archivo Vivalleytv Frontend.zip que descargamos previamente, al elegir el archivo que mencionamos solo es necesario hacer clic en el botón que dice restaurar.

Una vez hecho lo anterior aparecerá la página de Vivalley Openwebsite ahora solo haremos clic en la opción publicar para que la página este accesible desde la dirección web creada.

De esta manera hemos concluido con la creación de la página principal de nuestro website.

Creando los canales de video.

Para crear nuestros tres canales de video haremos lo siguiente:

En nuestro Smart cPanel ubicaremos la sección de Website y ahí la opción de Import Website.

 

Desde esa sección solo subiremos el archivo openwebsite.zip, nuestro Smart cPanel se encargará de descomprimirlo automáticamente y creará tres carpetas que son Videouno, videodos y videotres, cada una de estas carpetas aloja la plataforma cinematico, la cual nos ayudará a presentar los videos que queramos en nuestro sitio.

Configurando los canales de video.

Ahora tendremos que configurar cada uno de los canales con los videos que queramos mostrar. Para comenzar con la configuración accederemos a través de una dirección  como la siguiente misitioweb.gzpot.com/videouno o bien desde los enlaces que hay en nuestro sitio web.

Al hacer entrar por primera vez a estos enlaces Cinematico nos pedirá hacer una configuración de los videos que vayamos a mostrar, a manera de Ejemplo te daremos los datos que cada campo deberá llevar esto por supuesto puede cambiar después.

Datos de muestra para la configuración de Videouno.

Site Title: Comerciales.
Site Description: Te presentamos interesantes comerciales que algunas marcas han desarrollado.

Para la sección de Video Service Options haremos lo siguiente:

Elegiremos YouTube.
Username: Lo dejamos vacío.
Video Source: Elegimos la opción de Playlist.
PlaylistID: PL1nW608j6yWA9HrCSbzi8MHMGKHsATdBx
Feature Video ID: lg2IdOHjAS8

Te dejamos una imagen de la sección Video Service Options donde debes poner estos datos.

Para concluir solo debes crear un usuario, establecer una cuenta de correo por si se te olvida el password y una contraseña.

Para guardar la configuración solo hay que hacer clic en el botón verde ubicado en la parte inferior derecha de la página de configuración.

Un ejemplo de como quedaría tu canal de videos lo puedes ver en:

Vivalleytv.tk/videouno/

Los mismos parámetros de los que te mencionamos hace un momento son los que usamos para este sitio.

Ahora bien si quieres realizar alguna modificación a esta configuración solo debes agregar la palabra settings al final de videouno. Te dejamos un ejemplo misitioweb.gzpot.com/videouno/settings, por supuesto ahí tendrás que accesar con tu usuario y password, para realizar las modificaciones.

De la misma manera puedes configurar los sitios de videodos y videotres.

Cómo obtener el ID de los videos y del Playlist.

Todo video de Youtube y lista de reproducción poseen un código identificador único  el cual se puede obtener dese la URL, en este caso te vamos a enseñar como identificarlo. Como ejemplo usaremos esta lista de reproducción la cual usamos para enseñarte a configurar el sitio videouno.

www.youtube.com/watch?v=lg2IdOHjAS8&list=PL1nW608j6yWA9HrCSbzi8MHMGKHsATdBx

El parámetro v=lg2IdOHjAS8 indica el código del video que se esta reproduciendo.

El parámetro list=PL1nW608j6yWA9HrCSbzi8MHMGKHsATdBx indica el código de la lista de reproducción.

Si gustas te invitamos a que veas más listas de reproducción en nuestro canal de Youtube para que puedas probar con otras listas o mejor aun crea tu propia lista para definir los videos que vas a mostrar en tu sitio.

Canal de Youtube.

Las listas de reproducción que encontraras en ese canal son las que usamos para el sitio.

Vivalleytv.gzpot.com

Esperamos que este proyecto pueda ser de ayuda para reforzar elementos de aprendizaje en el desarrollo de sitios web y que la interacción con un cPanel real ayude a los estudiantes a conocer un poco más del trasfondo que hay en el desarrollo de los sitios web.

Nos interesa mucho escuchar cualquier comentario, experiencia o duda con respecto a este proyecto.

Enlaces:
-Dale otro aspecto a tu canal de Youtube con Cinematico.
-Crea tu sitio web en minutos con Zyro Builder.