Tutorial para Mobincube donde podrás crear fácilmente una pantalla principal, completamente original la cual tiene botones, menú y transiciones de colores. Para editar el código siempre recomiendo utilizar Adobe Dreamweaver ya que te permite visualizar los cambios que le haces a la plantilla sin salirte del programa. Además tiene su propia herramienta para selccionar los colores sin necesidad de utilizar el html color picker de Google. Sin embargo, cualquier programa online o de descarga que funciona con HTML, te ayudará a personalizar el código a tus gustos.
Lo primero que debes hacer es personalizar el color del texto. Por defecto, está en color blanco, ya que considero que es un color neutro que combina a la perfección con cualquier otro tono, pero si buscan combinar las letras con los colores de su empresa, deben ir a la parte de estilos, al inicio del código y cambiar el color en la etiqueta a. (ver el vídeo es altamente recomendable).
Luego, debes personalizar los colores de los botones y sus transiciones. He dispuesto el código de manera que puedan editar el color base del botón, después su transición. Cada botón está identificado como celda1, celda2, celda3, celda4, celda5 y sus respectivos comentarios para que sea mas sencillo identificar dónde se modifica el color. Pueden colocar todos los botones de un mismo color, pueden colocarlos variados. Ya esto es libre de su creatividad o de la identidad de la empresa.
La última fase para modificar el código es agregar los titulos a cada botón y a su menú. Los titulos se encuentran entre las etiquetas b para que sean en letra negrita y se distingan de los títulos del menú. Si desean agregar mas opciones en el menú, tan sólo deben agregar la línea completa desde la etiqueta a. Para indicarle a cada opción que abra una pantalla diferente en la aplicación, deben dentro de la etiqueta "href" agregar la siguiente línea: "mobincube://action/section/nombre_de_la_pantalla". De este modo, mobincube abrirá una pantalla en la aplicación cada vez que el usuario haga clic en la opción. En mobincube esta pantalla debe tener el mismo nombre que en este documento html porque de lo contrario, no la encontrará. El nombre debe coincidir en todos sus aspectos, por ello recomiendo que el nombre siempre sea en minúsculas y sin espacios, tanto en la pantalla de mobincube como en el código HTML. Es la única precaución a tomar. Si lo desean, el menú puede abrir una página web y en tal caso, únicamente deben pegar dentro de la etiqueta "href" el enlace incluyendo el http. Es útil en aquellos casos donde quieres compartir el sitio web de tu organización, la página de facebook de tu empresa o tu tienda online.
Para finalizar la parte de la edición del código, el documento html debe llamarse "index.html" y estar dentro de una carpeta de tipo .zip. Son los dos únicos formatos que Mobincube acepta para crear pantallas basadas en HTML. En cuánto a Mobincube, debes tener tu sesión iniciada y crear una aplicación. También puedes agregar la pantalla en un proyecto que ya tengas iniciado. La pantalla debe ser de tipo web para poder agregar la carpeta zip. Para crear una previsualización, debes recordar que todas las pantallas que hayas escrito en el código, existan en Mobincube y tengan contenido. Mobincube no genera previsualizaciones si las pantallas están vacías.
El código de la pantalla principal para Mobincube es:
Un ejemplo del html con opciones y colores (como es una página para compartir el código no es la vista final en comparación con Mobincube, para verlo en el celular es importante previsualizar la aplicación con Mobincube).
See the Pen Pantalla Principal para Mobincube by Violeta S. (@leonvioleta4) on CodePen.
Lecturas recomendadas:
- Tutoriales de Mobincube Aquí aprenderás cómo utlizar mobincube desde cero para crear originales aplicaciones Android, IOS o Windows.
- Cómo Enviar y Distribuir Aplicaciones en la Google Play Store Aprenda a generar un archivo APK firmado de lanzamiento del Android Studio, crear una cuenta de desarrollador.
- Curso de Desarrollo Web HTML, CSS y JavaScript. Edición 2018 (Manuales Imprescindibles) (Spanish Edition)
No comments:
Post a Comment