![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/2_0_original_que_solicita-al-usuario-agregarlo-de-forma-automatica-300x169.png\")
<\/p>\n<\/p>\n
<\/p>\n
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<\/em>, nos desvelar\u00e1 como actualmente la app web de n-dimensiones dispone de un acceso bajo una conexi\u00f3n segura, describiendo el proceso a seguir para lograrlo, se requerir\u00e1 de la aprobaci\u00f3n del navegador web como del buscador en internet. Vamos a ver en mi caso como superar que google nos diga que es insegura.<\/a><\/em><\/p>\n Tras leer tal apartado sabr\u00e1s que <\/em> cualquier navegador dispondr\u00e1 a la izquierda de la url del sitio web del icono de un candado de color verde.<\/p>\n Y a continuaci\u00f3n listamos el resto de requisitos en este articulo uno a uno para finalizar describiendo con capturas como has de ejecutar correctamente una app web<\/span> <\/strong>moderna, observar\u00e1 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.<\/em><\/p>\n\n\n <\/p>\n\n\n\n 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\u00f3n 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\u00e1s cosas que os desvelo a continuaci\u00f3n as\u00ed como una de las primeras ventajas de este modo de acceso correcto, que es que sin la intervenci\u00f3n del usuario ya se conecta en modo conexi\u00f3n segura. <\/p>\n\n\n Sobre la portada disponemos de dos juegos \u00abla ciudad perdida \u00bb y \u00abun mundo nuevo\u00bb, versi\u00f3n web como en google play.<\/p>\n 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 \u00bb la ciudad perdida\u00bb, y realmente al contenido que se accede desde ambos es a una misma URL, accesible desde cualquier navegador web, ejemplo a \u00abhttps:\/\/www.n-dimensiones.es\/game0<\/a>\u00bb . Y la segunda linea para el juego \u00abun mundo nuevo\u00bb se accede a \u00abhttps:\/\/www.n-dimensiones.es\/game<\/a>\u00bb .<\/p>\n\n\n Sin instalar el icono a la app web como instalandolo observamos un un amplio abanico de posibilidades con su ejecuci\u00f3n tanto de los juegos como del acceso a la portada. https:\/\/www.n-dimensiones.es<\/a><\/p>\n\n\n\n Las app de android usan de modo transparente , la app \u00abandroid system webview\u00bb que viene preinstalada en android como un navegador web de caracter\u00edsticas semejantes al chrome para que no nos perdamos ninguna posibilidad de las constantes actualizaciones que ambos ir\u00e1n teniendo tal como sucede con el resto de app de android, actualizaciones autom\u00e1ticas si no cambiaste la configuraci\u00f3n predeterminada en la app google play y te conectas a la wifi en casa.<\/p>\n\n\n\n <\/p>\n\n\n Una app web moderna como la portada y los videojuegos(primeros iconos de cada linea), se les llaman tambi\u00e9n app web \u00abprogresiva\u00bb<\/a> pero s\u00f3lo va a ejecutarse correctamente si cumple una serie de requisitos entre los que ya hemos citado la conexi\u00f3n segura, el resto la hacen m\u00e1s accesible y navegable, as\u00ed como a nivel de desarrollo precisar\u00e1 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\u00f3n en tu fichero hosts del sistema operativo lo solucionar\u00eda.<\/p>\n Algunos beneficios a\u00fan no comprobados est\u00e1n ah\u00ed disponibles, ejemplo que permitan ejecutarse offline, un ejemplo ser\u00eda escuchar m\u00fasica. Si alguien quiere probarlo igual y se anticipa y me puede confirmar que autom\u00e1ticamente tiene tal disponibilidad de ser jugable sin requerir estar conectado a internet pero para ello antes seguramente habr\u00e1s 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.<\/p>\n El siguiente requisito es presentarse de forma predeterminada a fullcreen aunque para si por alg\u00fan motivo todav\u00eda no se presenta as\u00ed al ejecutarla, existe disponible en la interfaz web tal bot\u00f3n para su acceso de forma manual.\u00a0 Al modo fullscreen tambi\u00e9n se le conoce como modo inmersivo un requisito para acceder a contenidos de realidad virtual, tambi\u00e9n da mayor estabilidad al usar controles en juegos que no precisen del cursor del rat\u00f3n o pulsar sobre botones en pantalla.<\/p>\n En cualquier caso regresan al modo normal\u00a0 con la url disponible pulsando ejemplo la tecla \u00abESC\u00bb.\u00a0 En mi caso puedes pulsar el bot\u00f3n disponible al lado superior derecho pero si no entraste\u00a0 como a continuaci\u00f3n describimos.<\/p>\n Cuando\u00a0 accedes con cualquier navegador web a un portal sueles guardar su url al favoritos o marcadores,\u00a0 al ejecutarlo en modo progressive ya no sera necesario puesto que en su lugar tendr\u00e1s disponible un acceso directo o icono en la pantalla de tu dispositivo como se muestra en las siguientes capturas.<\/p>\n Ser\u00e1 pues lanzar desde el mismo la app web o juego, para lograr tal ejecuci\u00f3n del modo correcto , que autom\u00e1ticamente ejecutara sin intervenci\u00f3n del usuario todo lo que hayamos predeterminado\u00a0 como fullscreen, conexi\u00f3n segura, y orientaci\u00f3n del dispositivo ejemplo en horizontal. Para la\u00a0 creaci\u00f3n del icono, se suele solicitar autorizaci\u00f3n al usuario en una primer acceso a la aplicaci\u00f3n pero permite hacerlo a mano con posterioridad.<\/p>\n \u00a0<\/p>\n Propuesta de a\u00f1adirlo a la pantalla autom\u00e1tica tras una primea ejecuci\u00f3n.<\/p>\n \u00a0<\/p>\n Una vez a\u00f1adido, estar\u00e1 disponible en el menu<\/p>\n \u00a0<\/p>\n El resultado del proceso es un icono en la pantalla como de cualquier app nativa de android instalada.<\/p>\n Realmente lanzar tal\u00a0 app web\u00a0 usar\u00e1 al navegador predeterminado o desde el que se genero tal icono ej chrome<\/p>\n En esta captura mostramos el icono amarillo con las iniciales \u00abN-D\u00bb de n-dimensiones que se distingue del resultante de instalar los juegos android en el color que en este \u00faltimo caso\u00a0 ser\u00e1 de color azul.<\/p>\n \u00a0<\/p>\n Un \u00faltimo requisito si prestante atenci\u00f3n es forzar\u00a0 la orientaci\u00f3n predeterminada ejemplo a\u00a0 horizontal o apaisada. El usuario siempre ha de poder reorientar su dispositivo como desee al navegar normalmente pero de este modo lo har\u00e1 del modo preestablecido\u00a0 ejemplo en horizontal\u00a0 porque seguramente ser\u00e1 como mejor se presente, sea mas vistosa, estable y f\u00e1cil de manejar la app web por el usuario, sobre todo si incluye videojuegos, estos como precisan de precisi\u00f3n, en mi caso no permiten el escalado o zoom con el touch de los dedos sin que perdamos el control o precisi\u00f3n sobre la escena(creo aqu\u00ed pueda dar un detalle del desarrollo web, no sin algunas dudas de lo que exactamente estoy diciendo pero parece\u00a0 importante como es que entre los par\u00e1metros del tag meta del html file \u00abvieport\u00bb 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\u00f3n asociando muchos mas pixeles.)<\/p>\n Aun as\u00ed os deje apartados accesibles desde el\u00a0 portal fuera a parte del juego, que os brindo tal posibilidad de abrir una pagina con informaci\u00f3n disponible o accesible al pinchar el monigote o pintor-constructor.<\/p>\n Recordemos o resumamos del apartado de conexi\u00f3n segura que lograrla nos\u00a0 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\u00edamos evitar y google penaliza en los buscadores a la hora de mostrar resultados.<\/p>\n Y ya para finalizar listamos un requisito que toda web moderna sea o no progresiva si debe ya cumplir, es\u00a0 ser \u00abresponsive\u00bb, que es adaptar los contenidos y letras de la pagina web a la resoluci\u00f3n o pantalla del dispositivo como a cualquier cambio en su orientaci\u00f3n( el poder hacer zoom con touch de los dedos a mi opini\u00f3n deb\u00eda ser parte de este concepto). Al llegar aqu\u00ed os aclaro que s\u00f3lo al jugar debemos estar en la orientaci\u00f3n horizontal y fullscreen o hacerlo posible a mano, reorientando el dispositivo e pinchando el icono fullscreen , opciones predeterminadas si logramos\u00a0 ejecutar la app en modo progresiva.<\/p>\n Hice la portada inicialmente progresive en su primer lanzamiento en septiembre cuando fue publicada la app web,\u00a0 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\u00eda como ahora desplazarse hacia abajo buscando m\u00e1s apartados e informaci\u00f3n, he realizado este cambio sin duda para mejor,\u00a0 una iniciativa que combina estas dos ultimas t\u00e9cnicas y las capturas muestran o anticipan el equilibrio alcanzado que sin duda agradar\u00e1 para atraer a un mayor n\u00famero de\u00a0 visitas.<\/p>\n Y las capturas siguientes muestran ahora que ya es posible desplazarse hacia abajo en la portada, el resultado obtenido en s\u00f3lo unos cuantos dispositivos que pude probar frente a los miles que hay y que la probaran.<\/p>\n \u00a0<\/p>\n 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<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n Orientaci\u00f3n en horizontal<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n y en Horizontal en fullscreen<\/p>\n \u00a0<\/p>\n El concepto de responsive si incluye al tama\u00f1o letra y su disposici\u00f3n que ha de readaptarse a la orientaci\u00f3n usada,\u00a0 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\u00e1ginas,\u00a0 \u00a0 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.<\/p>\n A mi me encanta seguir t\u00e9cnicas y cada uno de mis art\u00edculos os desvela alguna o muchas para mostrar mi iniciativa e innovaci\u00f3n probando cosas nuevas que a muchos os encantara si siguen mis videotutoriales, la t\u00e9cnica responsive tiene gran auge en un framework o herramienta web que se conoce como \u00abbootstrap\u00bb como lo use y conoc\u00ed en su momento, he visto su actual enfoque del tema y dice primero partir de la base de ajustarse sobre dispositivos m\u00f3viles 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\u00e9cnica a equipos en pantalla modo vertical con un ancho m\u00e1ximo de 540px, luego con un ancho m\u00e1ximo de 640px, y as\u00ed 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.<\/p>\n Mi juego es sin duda una app web, la portada ahora es mas vistosa al quedar independizada de la p\u00e1gina del juego, pero proviene de haberse localizado en misma pagina y ambos combinan indudablemente numerosas t\u00e9cnicas de desarrollo web , modelado 3d, dise\u00f1o gr\u00e1fico como se aprovechan de mi amplia experiencia t\u00e9cnica para no encontrar limites donde reproducirlos, ejemplo poder simular cualquier equipo as\u00ed como recrear cualquier escenario y en cualquier circunstancia, por eso me he exigido mucho y la primera versi\u00f3n ya os presentaba disponibilidad 100×100 en pantallas touch(t\u00e1ctil), 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\u00e1ndome en el crowfunding en el portal PATREON.<\/a><\/p>\n Cualquier web que se considere moderna y puntera en la actualidad no deber\u00eda dejar pasar incorporar acceso a dispositivos m\u00f3viles por el escaneo de un c\u00f3digo 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\u00fan car\u00e1cter, en mi caso pinchas los iconos qr y se abre la imagen en grande con el c\u00f3digo, a continuaci\u00f3n abres la c\u00e1mara y deber\u00edas disponer del detector de qr que te abren la pagina de informaci\u00f3n de producto. Sino siempre puedes tener instalado la app android<\/a> que use la c\u00e1mara autom\u00e1ticamente y detecte la pagina web abriendola tambi\u00e9n de forma autom\u00e1tica. Su empleo es algo habitual en las tiendas de grandes superficies o supermercados para consultar precios o informaci\u00f3n. En mi caso aqu\u00ed son los videojuegos por el momento a los que facilite el acceso s\u00f3lo a los mismos en su versi\u00f3n web y google play. Estas im\u00e1genes con el c\u00f3digo qr se obtienen f\u00e1cilmente en este portal online.<\/a><\/p>\n\n\n\n Esta web permite tal flexibilidad que cualquier novedad que desee presentar es r\u00e1pida y f\u00e1cilmente 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\u00eda esto estaba solo disponible el de la ciudad perdida, desde el mismo ya accedes a la suscripci\u00f3n al canal que recomiendo de los videotutoriales por lo que dudo incorpore mas iconos si ya hiciste la incorporaci\u00f3n a la web de un recurso tan familiar hoy d\u00eda como ver los \u00faltimos tuits. <\/p>\n\n\n\n Ya esta vez para finalizar, os anunci\u00f3 que tambi\u00e9n incorpor\u00e9 facilmente una tercera columna a las filas con c\u00f3digo de qr para un nuevo icono de acceso al correspondiente c\u00f3digo fuente y mucho mas como los assets(binarios de las mallas 3d, im\u00e1genes y sonidos)publicado al github portal, para garantizar ser actualizado al d\u00eda con cada nueva incorporaci\u00f3n 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\u00f3n o editar la que os he dejado disponible pero con vuestras propias mallas 3d y sonidos.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":14,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[95],"tags":[91,90,12,14,5,81,15,86,89,6,8,82,84,112,11,83,111,7,9,10,85,80,13,88],"_links":{"self":[{"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/posts\/127"}],"collection":[{"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":41,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":696,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/posts\/127\/revisions\/696"}],"wp:attachment":[{"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/portada-update-300x169.jpg\")
<\/p>\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/2_0_agregar-a-pantalla-de-inicio-icono-app-web-300x169.png\")
De forma manual, con posterioridad podr\u00e1s a\u00f1adir tal icono<\/p>\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/2_0_original_que_solicita-al-usuario-agregarlo-de-forma-automatica2-300x169.png\")
<\/p>\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/2_1_abrir-app-web-una-vez-ya-instalada-o-su-icono-300x169.png\")
<\/p>\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/resultado-icono-en-pantalla-android-225x300.jpg\")
<\/p>\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/vertical-sin-full-169x300.png\")
\u00a0<\/p>\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/vertical-full-169x300.png\")
<\/p>\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/horizontal-sin-full-300x169.png\")
<\/p>\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/horizontal-full-300x169.png\")
<\/p>\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2018\/09\/para-ocultarlo-vuelves-a-cliquear-el-interrogante-300x174.jpg\")
<\/p>\n\n\n![\"\"](\"https:\/\/www.n-dimensiones.es\/main\/wp-content\/uploads\/2019\/06\/acceso-web-y-android-a-un-mundo-nuevo-1024x578.png\")
<\/figure>\n\n\n\n