Este articulo consta de un conjunto de requisitos para obtener el acceso del modo correcto , entre ellos dedicamos todo un articulo para exponer el referido al acceso seguro, nos desvelará como actualmente la app web de n-dimensiones dispone de un acceso bajo una conexión segura, describiendo el proceso a seguir para lograrlo, se requerirá de la aprobación del navegador web como del buscador en internet. Vamos a ver en mi caso como superar que google nos diga que es insegura.
Tras leer tal apartado sabrás que cualquier navegador dispondrá a la izquierda de la url del sitio web del icono de un candado de color verde.
Y a continuación listamos el resto de requisitos en este articulo uno a uno para finalizar describiendo con capturas como has de ejecutar correctamente una app web moderna, observará termina siendo semejante a disponer de los iconos de las app nativas de android sobre la pantalla sin necesidad de que haya de pertenecer al store de google play.
Para entenderlo recomiendo ir al grano y probarlo, observando con tus propios ojos en la practica o de las siguientes capturas como tras una primera ejecución o acceso a la web, nos instala el icono en la pantalla para en las sucesivos accesos por el mismo, vemos que se reorienta en horizontal y a fullscreen entre muchas más cosas que os desvelo a continuación así como una de las primeras ventajas de este modo de acceso correcto, que es que sin la intervención del usuario ya se conecta en modo conexión segura.
Sobre la portada disponemos de dos juegos «la ciudad perdida » y «un mundo nuevo», versión web como en google play.
Las versiones de ambos para web como para android de un mismo juego se exponen en cada linea de iconos justo bajo el boton del logo de google play, ejemplo , la primera linea para » la ciudad perdida», y realmente al contenido que se accede desde ambos es a una misma URL, accesible desde cualquier navegador web, ejemplo a «https://www.n-dimensiones.es/game0» . Y la segunda linea para el juego «un mundo nuevo» se accede a «https://www.n-dimensiones.es/game» .
Sin instalar el icono a la app web como instalandolo observamos un un amplio abanico de posibilidades con su ejecución tanto de los juegos como del acceso a la portada. https://www.n-dimensiones.es
Las app de android usan de modo transparente , la app «android system webview» que viene preinstalada en android como un navegador web de características semejantes al chrome para que no nos perdamos ninguna posibilidad de las constantes actualizaciones que ambos irán teniendo tal como sucede con el resto de app de android, actualizaciones automáticas si no cambiaste la configuración predeterminada en la app google play y te conectas a la wifi en casa.
Una app web moderna como la portada y los videojuegos(primeros iconos de cada linea), se les llaman también app web «progresiva» pero sólo va a ejecutarse correctamente si cumple una serie de requisitos entre los que ya hemos citado la conexión segura, el resto la hacen más accesible y navegable, así como a nivel de desarrollo precisará de crear un worker y fichero manifest. Puedo anticipar que sin simular el acceso al dominio www.n-dimensiones.es durante el testing o desarrollo del mismo no operan y como se precisa resolver su nombre, una sencilla operación en tu fichero hosts del sistema operativo lo solucionaría.
Algunos beneficios aún no comprobados están ahí disponibles, ejemplo que permitan ejecutarse offline, un ejemplo sería escuchar música. Si alguien quiere probarlo igual y se anticipa y me puede confirmar que automáticamente tiene tal disponibilidad de ser jugable sin requerir estar conectado a internet pero para ello antes seguramente habrás de jugar al completo cada nivel para que este descargado y disponible en tu disco. El tema de la cache ya se encarga de tal descarga pero desconozco si realmente interviene.
El siguiente requisito es presentarse de forma predeterminada a fullcreen aunque para si por algún motivo todavía no se presenta así al ejecutarla, existe disponible en la interfaz web tal botón para su acceso de forma manual. Al modo fullscreen también se le conoce como modo inmersivo un requisito para acceder a contenidos de realidad virtual, también da mayor estabilidad al usar controles en juegos que no precisen del cursor del ratón o pulsar sobre botones en pantalla.
En cualquier caso regresan al modo normal con la url disponible pulsando ejemplo la tecla «ESC». En mi caso puedes pulsar el botón disponible al lado superior derecho pero si no entraste como a continuación describimos.
Cuando accedes con cualquier navegador web a un portal sueles guardar su url al favoritos o marcadores, al ejecutarlo en modo progressive ya no sera necesario puesto que en su lugar tendrás disponible un acceso directo o icono en la pantalla de tu dispositivo como se muestra en las siguientes capturas.
Será pues lanzar desde el mismo la app web o juego, para lograr tal ejecución del modo correcto , que automáticamente ejecutara sin intervención del usuario todo lo que hayamos predeterminado como fullscreen, conexión segura, y orientación del dispositivo ejemplo en horizontal. Para la creación del icono, se suele solicitar autorización al usuario en una primer acceso a la aplicación pero permite hacerlo a mano con posterioridad.
De forma manual, con posterioridad podrás añadir tal icono
Propuesta de añadirlo a la pantalla automática tras una primea ejecución.
Una vez añadido, estará disponible en el menu
El resultado del proceso es un icono en la pantalla como de cualquier app nativa de android instalada.
Realmente lanzar tal app web usará al navegador predeterminado o desde el que se genero tal icono ej chrome
En esta captura mostramos el icono amarillo con las iniciales «N-D» de n-dimensiones que se distingue del resultante de instalar los juegos android en el color que en este último caso será de color azul.
Un último requisito si prestante atención es forzar la orientación predeterminada ejemplo a horizontal o apaisada. El usuario siempre ha de poder reorientar su dispositivo como desee al navegar normalmente pero de este modo lo hará del modo preestablecido ejemplo en horizontal porque seguramente será como mejor se presente, sea mas vistosa, estable y fácil de manejar la app web por el usuario, sobre todo si incluye videojuegos, estos como precisan de precisión, en mi caso no permiten el escalado o zoom con el touch de los dedos sin que perdamos el control o precisión sobre la escena(creo aquí pueda dar un detalle del desarrollo web, no sin algunas dudas de lo que exactamente estoy diciendo pero parece importante como es que entre los parámetros del tag meta del html file «vieport» se responsabiliza en cada pagina web de estas cuestiones, asociando cada pixel al del dispositivo. Cuando se escala en mis juegos rompe la estabilidad y precisión asociando muchos mas pixeles.)
Aun así os deje apartados accesibles desde el portal fuera a parte del juego, que os brindo tal posibilidad de abrir una pagina con información disponible o accesible al pinchar el monigote o pintor-constructor.
Recordemos o resumamos del apartado de conexión segura que lograrla nos encripta las comunicaciones extremo a extremo(ssl , https) sin necesidad de entrar a mano la url con el https cada vez(hay otras formas no seguras como http que deberíamos evitar y google penaliza en los buscadores a la hora de mostrar resultados.
Y ya para finalizar listamos un requisito que toda web moderna sea o no progresiva si debe ya cumplir, es ser «responsive», que es adaptar los contenidos y letras de la pagina web a la resolución o pantalla del dispositivo como a cualquier cambio en su orientación( el poder hacer zoom con touch de los dedos a mi opinión debía ser parte de este concepto). Al llegar aquí os aclaro que sólo al jugar debemos estar en la orientación horizontal y fullscreen o hacerlo posible a mano, reorientando el dispositivo e pinchando el icono fullscreen , opciones predeterminadas si logramos ejecutar la app en modo progresiva.
Hice la portada inicialmente progresive en su primer lanzamiento en septiembre cuando fue publicada la app web, sobre todo porque por entonces lanzaba el juego desde un icono disponible en el centro de la pantalla y entonces no estaba en su propia pagina separada de la portada como actualmente. En tal caso no podía como ahora desplazarse hacia abajo buscando más apartados e información, he realizado este cambio sin duda para mejor, una iniciativa que combina estas dos ultimas técnicas y las capturas muestran o anticipan el equilibrio alcanzado que sin duda agradará para atraer a un mayor número de visitas.
Y las capturas siguientes muestran ahora que ya es posible desplazarse hacia abajo en la portada, el resultado obtenido en sólo unos cuantos dispositivos que pude probar frente a los miles que hay y que la probaran.
A fullscreen observamos como aprovechamos ya mas espacio de la pantalla, mira abajo como vemos una zona negra de la pantalla que podria tener mas opciones o secciones a la vista
Orientación en horizontal
y en Horizontal en fullscreen
El concepto de responsive si incluye al tamaño letra y su disposición que ha de readaptarse a la orientación usada, osea en cualquier web, se adaptan sus apartados o secciones como el header(cabecera), footer(pie), etc a cualquier pantalla o dispositivo con el que se navegue entre sus páginas, Ha de visualizar su contenido sin colapsar y dejar suficiente margen entre las opciones que pueda seleccionar el usuario o cliquear como todo apartado disponible y visible.
A mi me encanta seguir técnicas y cada uno de mis artículos os desvela alguna o muchas para mostrar mi iniciativa e innovación probando cosas nuevas que a muchos os encantara si siguen mis videotutoriales, la técnica responsive tiene gran auge en un framework o herramienta web que se conoce como «bootstrap» como lo use y conocí en su momento, he visto su actual enfoque del tema y dice primero partir de la base de ajustarse sobre dispositivos móviles y luego hacerlo llegar al resto. En mi caso si uno desarrolla sobre un pc con una pantalla apaisada de 22′(1356px x 768px) es de donde tomas la base y luego ejemplo extiendes la técnica a equipos en pantalla modo vertical con un ancho máximo de 540px, luego con un ancho máximo de 640px, y así poco a poco vas de forma sencilla estableciendo una sencilla estrategia para que cada dispositivo quede ajustado mostrando lo mejor posible su contenido a como el usuario desee reorientar su equipo.
Mi juego es sin duda una app web, la portada ahora es mas vistosa al quedar independizada de la página del juego, pero proviene de haberse localizado en misma pagina y ambos combinan indudablemente numerosas técnicas de desarrollo web , modelado 3d, diseño gráfico como se aprovechan de mi amplia experiencia técnica para no encontrar limites donde reproducirlos, ejemplo poder simular cualquier equipo así como recrear cualquier escenario y en cualquier circunstancia, por eso me he exigido mucho y la primera versión ya os presentaba disponibilidad 100×100 en pantallas touch(táctil), pcs empleando un gamepad, como ver escenas con la cardboard del google para Realidad virtual. Todo un amplio abanico de posibilidades y gran potencial que os ofrezco para que desde el primer momento, lo disfruteis, jugando, desarrollando y testeando a un bajo coste o nulo, que por ello no tiene nada que envidiar a los complejisimos engines 3d unity, unreal y cryengine de costes muy elevados. Os espero siguiendo pues mis videotutoriales y apoyándome en el crowfunding en el portal PATREON.
Cualquier web que se considere moderna y puntera en la actualidad no debería dejar pasar incorporar acceso a dispositivos móviles por el escaneo de un código qr, uno le dice a un conocido he visitado esta web y se la deletrea caracter a caracter para que la escriba en la url en su navegador y no logra acceder, probablemente no escriba correctamente algún carácter, en mi caso pinchas los iconos qr y se abre la imagen en grande con el código, a continuación abres la cámara y deberías disponer del detector de qr que te abren la pagina de información de producto. Sino siempre puedes tener instalado la app android que use la cámara automáticamente y detecte la pagina web abriendola también de forma automática. Su empleo es algo habitual en las tiendas de grandes superficies o supermercados para consultar precios o información. En mi caso aquí son los videojuegos por el momento a los que facilite el acceso sólo a los mismos en su versión web y google play. Estas imágenes con el código qr se obtienen fácilmente en este portal online.
Esta web permite tal flexibilidad que cualquier novedad que desee presentar es rápida y fácilmente incorporada. Como nos deslizamos hacia abajo en la pantalla esta puede crecer aparentemente sin limite, ya hemos incorporado el icono con el video de la demo reel , cuando escribía esto estaba solo disponible el de la ciudad perdida, desde el mismo ya accedes a la suscripción al canal que recomiendo de los videotutoriales por lo que dudo incorpore mas iconos si ya hiciste la incorporación a la web de un recurso tan familiar hoy día como ver los últimos tuits.
Ya esta vez para finalizar, os anunció que también incorporé facilmente una tercera columna a las filas con código de qr para un nuevo icono de acceso al correspondiente código fuente y mucho mas como los assets(binarios de las mallas 3d, imágenes y sonidos)publicado al github portal, para garantizar ser actualizado al día con cada nueva incorporación ya testeada de cada juego que os pueda dejar disponible. Seguramente cada semana haya algo que incorporar. Es lo que recomiendo para quienes os suscribais a los videotutoriales, o ayuden en patreon y que quieran o no generar su propia versión o editar la que os he dejado disponible pero con vuestras propias mallas 3d y sonidos.