emula una #app para #android solo con la #URL de tu #web con Website 2 APK Builder
Buenas a tod@s
Con este software para pc podras ver tu pagina web responsive en cualquier movil android como si fuera una APP sin necesidad de tener ningun conocimiento de programacion
Solo debes indicarle la URL donde esta alojada la web y cuando se abra la app en el movil lo que hace es abrir tu web con apariencia de app!
Lo he probado y la verdad que tiene muy buena pinta
La pega es que no vale para iphone (pega gorda) y que seguramente no puedas alojarla el google play
A estas alturas probablemente ya sepas que tienes a tu disposición mil y una formas de conectar tu móvil al PC y usarlo remotamente. Con un móvil Samsung una de las mejores opciones es SideSync, mientras que otras opciones más generalistas son Teamviewer Host o AirDroid. Las alternativas no faltan, y ahora te presentamos una más.
Vysor es una forma más de ver la pantalla de tu móvil en el PC y controlarlo con el ratón y teclado. A diferencia de la competencia, se basa en una extensión para Google Chrome, lo cual lo hace compatible con Windows, Mac, Linux y ChromeOS, sin necesidad de instalar un cliente distinto en cada plataforma. ¿Te animas a probarlo?
1. Hazte con la extensión
Antes de nada, instala la extensión de Vysor para Google Chrome de Escritorio. Aquí tienes un enlace directo, aunque también puedes ir a la página oficial y pulsar Install. Como es habitual, la instalacción es cuestión de segundos, lo cual es un gran adelanto si lo comparas con instalar Teamviewer o similares
Lo siguiente que debes hacer es abrir la aplicación. En Google Chrome deberías tener un acceso en tus marcadores para las Aplicaciones de Chrome. Si no, escribe esto en la barra de direcciones:
chrome://apps/
2. Instala los controladores ADB
¿Recuerdas cuando dije que instalar Vysor es muy rápido? Tiene truco, y es que salvo que estés habituado a trastear con ADB, deberás hacer unos pasos adicionales para ponerlo en funcionamiento.
Primero, hazte con los controladores ADB para Windows. Koush, el autor de Vysor, te recomienda usar los de tu fabricante, pero también ha compilado su propia versión de los controladores ADB unificado que debería servir para cualquier dispositivo Android. Los puedes descargar aquí.
Después de descargarlo en Windows, pulsa Siguiente, Siguiente y Siguiente hasta que se complete la instalación, que no debería llevar más de un minuto.
3. Conecta tu móvil con cable USB al PC
Vysor acaba de introducir el control remoto de Android vía Wi-Fi, lo cual es genial, pero desgraciadamente esta es una de las funciones restringidas para la versión de pago (2 dólares al mes, 10 al año). Si no quieres pasar por caja, debes conectar el móvil con cable.
4. Activa la depuración USB
Ve a los Ajustes del sistema – Opciones de desarrollador y activa la depuración USB. Si no tienes el apartado de Opciones de desarrollador en tus Ajustes, ve a Acerca del dispositivo y toca repetidamente el Número de compilación para habilitar este menú.
5. Busca el dispositivo
De vuelta al PC, abre la aplicación Vysor de Chrome y, en un mundo ideal, recibirías una notificación de que el PC está intentando acceder a tu móvil (que deberás aceptar), en cuanto que vayas al apartado Find Devices.
Sin embargo, en mis pruebas nada ha sido tan fácil y ha hecho falta conectar el cable, desconectar, abrir y cerrar varias veces Vysor, así como usar el menú Inicio – Clockworkmod – Start ADB Server para que el sistema empiece a responder. Si es tu caso, puedes probar a usar otra instalación de ADB como el paquete 15 seconds ADB Installer que te mostrábamos aquí.
Básicamente debes lograr que ADB se inicie (te lo indica la parte inferior de Vysor) y que Android te pida la confirmación de depuración para la conexión desde el PC. Parece fácil -y debería serlo- pero podría fallar o hacerse de rogar.
6. Espera a que se instale su APK
Después de que Vysor se conecte satisfactoriamente con tu móvil, lo primero que hará es instalar el APK que permitirá el acceso remoto. El proceso es automático, por lo que no debes hacer nada más que esperar a que se complete el proceso.
La aplicación de Vysor para Android ocupa unos 8 MB de espacio, lo cual se puede considerar «no demasiado» según los estándares de hoy en día.
7. ¡A disfrutar!
Con esto, ya lo tienes todo listo. Desde la ventana de Vysor puedes ver y controlar la pantalla de tu móvil, a una calidad bastante aceptable, con muy poco retraso y usando tu ratón y teclado para chatear, jugar o lo que quieras.
Vysor incluye algunas funciones adicionales interesantes, como un botón para crear capturas de pantalla, que se abren inmediatamente en una pestaña en Google Chrome. Por lo demás, se puede decir que funcionar, funciona generalmente bien, aunque si tu fabricante dispone de su propia aplicación, probablemente te proporcionará mayor estabilidad.
Nipper es herramienta de seguridad, utilizada para comprobar la seguridad de sitios web del tipo CMS (Content Management System), especialmente si son las plataformas más utilizadas como WordPress, Drupal, Joomla , Blogger, Magento, Concrete5, VBulletin.
Nipper Toolkit Web Scan te ayudara a fortalecer la seguridad de los sitios tu sitios webs, realizando un escaneo de manera general a tu sitio web, revisando que tengas al día las últimas actualizaciones de seguridad.
Actualmente cuenta Nipper cuenta con mas de 15 módulos distintos, para recopilar información acerca de un URL en específica.
Su interfaz esta realizada con Material Design,y ha sido pensada para que tan solo con unos “toques” extraerías gran parte de su información.
Listado de Módulos:
– IP Server: Identifica la dirección de IP de un URL especifica.
– CMS Detect & Version: Detecta y identifica la versión y el sistema de CMS.
– DNS Lookup: Obtén la información de los DNS de una URL.
– Nmap ports IP SERVER: Escanea los puertos de un sitio web.
– Enumeration Users: Enumeración de usuario WordPress.
– Enumeration Plugins: Enumeración de Plugins WordPress.
– Find Exploit Core CMS: Búsqueda de vulnerabilidades en núcleo de CMS.
– Find Exploit DB: Busqueda de vulnerabilidades en exploit-db.com.
– CloudFlare Resolver: Identifica la verdadera dirección de IP.
– Identificación de Theme: Descubre e Identifica el tema de WordPress de un sitio web.
– Detección de CMS Avanzado
– Ataque de Fuerza Bruta ( WordPress )
Nipper NO requiere ROOT, tan solo requiere permiso a Internet.
Compatible desde 3.0 a Android 5.1.
Ionic es un framework de desarrollo de aplicaciones híbridas en HTML5 basado en AngularJS y que funciona con Apache Cordova (sí Cordova con V).
En mi opinión, sus puntos fuertes son:
Rendimiento muy bueno: sí, no es lo mismo que una aplicación nativa. Pero para un buen número de apps que hacen poco más que una aplicación web va que chuta. Y el mismo código te vale para IOS y Android.
Tiene un set de componentes visuales muy chulo y fácil de usar.
Si sabes AngularJS empezar a usarlo es inmediato.
Con este post empezamos una serie en la que elaboraremos una aplicación que presentará un listado de eventos. Utilizará unbackend en Node.js y permitirá autenticarse con Twitter.
Con ese comando lo que estamos diciendo a Ionic es que cree una aplicación básica con navegación basada en tabs, en el directorio events-app. Nos preguntará si queremos crear una cuenta ionic.io, la cual no es necesaria para poder hacer este tutorial.
¡Listo!, ahora entramos al directorio de la aplicación y la arrancamos para echarle un vistazo.
12
cd events-appionic serve
Ionic creará un servidor http y podremos abrir la página en nuestro navegador en la dirección http://localhost:8100. La idea es desarrollar utilizando el navegador y después probar en un móvil o un emulador.
Debes tener en cuenta que si vas a utilizar APIs de dispositivo (por ejemplo, el acelerómetro) tendrás que probar estas cosas en un emulador o dispositivo, ya que el navegador no implementa esto.
app-creada-1
app-creada-2
Para visualizar la aplicación con la resolución de otro dispositivo en el mismo navegador web puedes hacerlo:
En Firefox pulsando Ctrl-Shift-M.
En Chrome abriendo las herramientas de desarrollo (F12) y pulsando en el dibujito del teléfono arriba y en la izquierda.
Personalmente, suelo utilizar Firefox Developer Edition, y cuando el depurador se me queda corto me paso a Chrome un rato.
Estructura de directorios
Echemos un vistazo a los directorios que Ionic nos ha creado.
directorios
Se trata de un esqueleto web para una aplicación de Cordova, en la que se utiliza Gulp para automatización de algunas tareas yBower como gestor de dependencias frontend.
De aquí, lo importante lo tenemos en el directorio www.
directorio www
Este directorio debes verlo como el de aplicación web normal y corriente, con tres salvedades:
Puedes usar AngularJS. De hecho ya es una aplicación Angular básica con unos cuantos controladores y servicios.
Y por último, puedes usar los componentes de Ionic en forma de directivas AngularJS.
Por lo demás es lo mismo que te encontrarías en otra web. El index.html, carpetas para el CSS y JS etc.
Preparando el proyecto
Vamos a hurgar un poco en el código que viene de ejemplo y dejarlo limpito para lo que nosotros necesitamos. Que básicamente serán tres vistas: una para autenticarnos, otra para ver los eventos y otra para cerrar la sesión.
NOTA: el código tal cual lo dejamos en este paso puedes obtenerlo con:
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title>Events App</title><linkhref="lib/ionic/css/ionic.css"rel="stylesheet"><linkhref="css/style.css"rel="stylesheet"><!-- ionic/angularjs js --><scriptsrc="lib/ionic/js/ionic.bundle.js"></script><!-- cordova script (this will be a 404 during development) --><scriptsrc="cordova.js"></script><!-- your app's js --><scriptsrc="js/app.js"></script><scriptsrc="js/controllers.js"></script><scriptsrc="js/services.js"></script></head><bodyng-app="eventsApp"><ion-nav-barclass="bar-positive"><ion-nav-back-button></ion-nav-back-button></ion-nav-bar><ion-nav-view></ion-nav-view></body></html>
app.js
El fichero JS principal. En él definimos el nombre de la aplicación (eventsApp) y tres dependencias, que son el propio framework Ionic, y servicios y controladores de la aplicación. Después configuramos el enrutador. En Ionic se utiliza Angular UI Router.
El router de Ionic difiere del router por defecto de Angular en que en este se utiliza el concepto de máquina de estados. Aquí utilizamos un estado abstracto tab y dos estados hijos: list y account. Por otra parte hay otra vista independiente, login.
Este sistema permite tener vistas anidadas. En este caso, las vistas que necesitamos (listado y configuración), se integran dentro de otra. A estas rutas les asignamos una plantilla HTML y un controlador.
El servicio que utilizaremos se encargará de proveer a la aplicación de la lista de eventos. De momento los tendrá en memoria. Más adelante se conectará al backend para obtener el listado.
Proporciona una única funcion: all. Para listar los eventos.
angular.module('eventsApp.services', []).factory('EventsService', function($http) {return { all: function() {// TODO: get events from backendvar events = [ {'speaker': 'Homer Simpson','title': 'Emprender en servicios web: Compuglobalhipermeganet','place': 'Sala 5','date': '15:00' }, {'speaker': 'Stewie Griffin','title': 'Cómo generar ingresos extra siguiendo gordos con una tuba','place': 'Salón de talleres 1','date': '17:00' }, {'speaker': 'Ralph Wiggum','title': '¡Corre plátano!','place': 'Sala 5','date': '19:00' } ];return events; } };});
controllers.js
Tenemos un controlador para el listado (que utiliza el servicio para listar los eventos), y otros para las vista de login y cuenta, que de momento no hacen nada más que mostrar un mensaje en la consola cuando se pulse un botón.
Esta directiva se utiliza para la navegación con los tabs, que son los menús que se ven en la parte de abajo.
12345678910111213
<ion-tabsclass="tabs-icon-top tabs-color-active-positive"><!-- List Tab --><ion-tabtitle="Eventos"icon-off="ion-ios-people-outline"icon-on="ion-ios-people"href="#/tab/list"><ion-nav-viewname="tab-list"></ion-nav-view></ion-tab><!-- Account Tab --><ion-tabtitle="Cuenta"icon-off="ion-ios-gear-outline"icon-on="ion-ios-gear"href="#/tab/account"><ion-nav-viewname="tab-account"></ion-nav-view></ion-tab></ion-tabs>
login.html
Desde esta vista mostraremos un botón para iniciar la sesión. Utiliza las directivas:
ion-view: para cargarse dentro del nav-view.
ion-content: un área para el contenido.
button: un botón normal corriente con ng-click=”logout()”. Al pulsarse ejecutará la función logout del controlador correspondiente.
12345
<ion-viewview-title="Autenticación"><ion-contentclass="padding"><buttonclass="button button-block button-positive"ng-click="authenticate()">Inicia sesión con Twitter</button></ion-content></ion-view>
vista de login
list.html
Igual que la vista de login, utiliza ion-view para ser cargada. Después utiliza el componente card para crear una tarjetita con la información de cada evento.
Con ng-repeat se van cargando los elementos del $scope y entre llaves van poniéndose los atributos de los objetos de eventos. Esto es AngularJS básico.
En esta primera parte del tutorial de Ionic hemos visto:
Cómo instalar Ionic.
Cómo crear el esqueleto de un proyecto y verlo en el navegador.
La estructura de una app hecha con Ionic.
En la segunda parte de esta serie veremos cómo crear un sencillo backend con Node.js y Express que permita autenticarse con Twitter y proporcione un listado de los eventos.
Mucho se ha hablado sobre programar apps en este blog. Sobre desarrollo de aplicaciones Android e iOS, también sobre aplicaciones responsive y las nativas. Sobre monetizar esos proyectos móviles. Incluso el diseño de apps se ha hecho un hueco en nuestro blog. Pero nunca hemos dejado suficientemente clara una buena opción para llevar a cabo tu desarrollo móvil. Me refiero a programar una aplicación multiplataforma con HTML5.
Para los que acabáis de llegar al mundo de las apps, la diferencia entre las aplicaciones nativas y multiplataforma es que las primeras están ‘escritas’ en su propio lenguaje de programación de apps. Mientras que las aplicaciones multiplataforma tienen un solo código que es interpretado y ajustado a los dispositivos, diríamos que son prácticamente sinónimo de las aplicaciones web de las que hemos hablado en varias ocasiones.
Dentro de esta categoría nos encontramos dos existen 2 ramas de aplicaciones multiplataforma: la primera sobre WebView ( que utiliza HTML5, CSS3, JavaScript y que trataremos en este artículo); y otra tipoXamarin que escribes una vez el código en un lenguaje común y te lo “traduce” a nativo de cada una de las plataformas.
Uno de los lenguajes que precisamente nos permiten crear apps multiplataforma, que con un solo desarrollo sean accesibles desde cualquier dispositivo, ese es HTML5. Veamos un poco más en profundidad en qué consiste:
¿Qué es exactamente HTML5?
HTML5 es un lenguaje markup que se utiliza para estructurar y mostrar contenidos en web. Proporciona soporte para aplicaciones multimedia avanzadas, incluyendo audio y video. Pero también nos permite modificar el ‘layout’ de una página y modificar así su aspecto.
En este sentido, ¿cómo pueden aprovecharlo los desarrolladores de apps? El experto podrá programar apps interactivas con HMTL5 que se verán a través del navegador de cualquier dispositivo.
Es precisamente HTML5 uno de los lenguajes más versátiles para desarrollar aplicaciones web y el más utilizado al crear apps no nativas.
¿Porqué programar apps con HTML5?
En primer lugar podemos destacar que HTML5 es un lenguaje de programación muy extendido. De hecho se ha convertido desde octubre de 2014 en el estándar de programación web, así siempre encontraremos muchos recursos al respecto. Además, el World Wide Web Consortium (W3C) puso su sello de “Recomendado” a la quinta versión del lenguaje.
Ya hemos dejado bien claro porque el lenguaje de programación es importante a nivel mundial y para los programadores convencionales. Pero ¿sabes qué características tiene este lenguaje para convertirse en uno de lasmejores opciones para programar apps multiplataforma? Vamos a exponerte esas ventajas de utilizar HTML5 al crear aplicaciones móviles.
Ante todo está su universalidad, es decir que funciona en todos los navegadores, ya sean en dispositivos móviles o desde el ordenador tradicional. El código es interpretado y mostrado por cualquiera de los navegadores (Chrome, Safari, Firefox, Internet Explorer).
Es una lenguaje con vocación claramente audiovisual. Permite incluir nativamente tanto audio cómo vídeo. Apuesta por mostrar e incluir contenidos multimedia en las creaciones.
Es mobile friendly. Una de las ventajas de la programación de apps con HTML5 es que este lenguaje busca ser responsive, adaptarse a la pantalla en la que se muestra el contenido. Por eso se convierte en perfecto para crear webs que se vayan a ver como aplicaciones (es decir, web apps). Según datos de la firma de análisis Vision Mobile, más del 50% de las aplicaciones móviles utilizan HTML5 junto a JavaScript y CSS.
Para los presupuestos más limitados es una muy buena opción ya que es más barato que otras alternativas nativas. O incluso para empezar con una beta de nuestro negocio o juego para móviles arrancar con una versión en HTML5 para ver si funciona y existe mercado puede suponer un gran ahorro. Juegos del estilo al de Candy Crush (puzzles) pueden empezar con esta tecnología y más adelante pasarse al nativo.
Puedes programar apps en beta con HTML
Y finalmente, pero no menos importante, el lenguaje HTML5 es decarácter abierto: Es decir, cualquiera puede modificar, mejorar, ampliar o inventarse nuevos servicios sobre aplicaciones ya desarrolladas.
Ventajas e inconvenientes de programar apps multiplataforma
Continuando lo que decíamos en el apartado interior, la mayor de lasventajas de crear apps multiplataforma con HTML5 y otros lenguajes es para aquellos de vienen del desarrollo Web. El programador web pueden utilizar su experiencia para introducirse en el desarrollo de apps de forma muy rápida y sencilla.
“Otra ventaja es que no hace falta el doble o triple de recursos para hacer la misma app en Android, iOs y Windows Phone”, añade Jose Antonio Llopis, Director técnico en Yeeply.
Como inconvenientes cabe destacar la velocidad de la app, que se ve seriamente reducida. Del mismo modo el acceso al hardware del dispositivo se ve limitado a los plugins disponibles. Otro inconveniente es que aunque se asegure que la app vaya a funcionar de forma automática en cualquier plataforma, eso no es cierto del todo. En la práctica hay que ir comprobando el desarrollo en todas las plataformas y comprobar que lo se ve bien en una también funciona en las otras.
Eso sí, RECUERDA que aunque las aplicaciones sean multiplataforma hay que generar una apk ( para dispositivos Android) o ipa nativa (para dispositivos iOS) para que sea legible y se muestre en los dispositivos móviles. Por eso mismo nos harán falta los SDK de cada plataforma. Como alternativa podemos usar un servicio que nos lo genere automáticamente como Adobe Build.
Herramientas para desarrollo multiplataforma
Las herramientas más utilizadas para programar apps plataforma del tipo de WebView son las que te presentamos a continuación:
Apache Cordova: es un framework para el desarrollo de aplicaciones móviles propiedad de Adobe Systems que permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas web genéricas como JavaScript, HTML5 y CSS3, resultando aplicaciones híbridas.
AngularJS: es un framework de JavaScript de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página.
Ionic:es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.
Aunque la calidad de este tipo de aplicaciones no es la óptima que podemos encontrar en un desarrollo nativo, funciona muy bien para proyectos pequeños y medianos que no necesitan un rendimiento muy alto ni demasiadas funcionalidades. De hecho la primera aplicación de Facebook estaba desarrollada con este tipo de tecnología hasta que se decidió por la programación de apps nativas.
Hace algunos años nos sorprendió una extraordinaria aplicación de realidad aumentada llamada World Lens para iOS, que era capaz de traducir carteles y cualquier texto que captase la cámara sobre la marcha y mostrarlos sobre la imagen de un modo que imitaba su aspecto original (pero traducido, claro). Así, al mirar con esta aplicación (que también está disponible para Android e incluso Google Glass) a través de la cámara del dispositivo, el mundo exterior parecía convertirse a nuestro idioma de manera casi mágica. Y parece que Google se ha dado cuenta de que World Lens es mucho más potente que su propia aplicación Google Googles, que también realiza entre otras una función similar, aunque no en tiempo real ya que necesita que hagas una foto, y ha decidido adquirir la empresa que la desarrolla, Quest Visual. Curiosamente, World Lens era una de esas aplicaciones de las que Apple presumía en su anuncio “Powerful” (potente) y en su web como muestra de la potencia del iPhone.
No hay detalles del precio que se ha pagado por la compañía ni de los planes que tiene Google para Quest Visual, aunque se entiende por el mensaje en la web que el músculo financiero y de desarrollo de Google servirá para integrar World Lens con sus potentes tecnologías de traducción, para las que puede ser un excelente complemento y sobre todo para productos como las Google Glass.
Otro punto interesante es que World Lens, según señala en el mensaje en su web, ha hecho gratuitos por tiempo limitado no sólo el programa sino también los paquetes de idiomas que hasta ahora eran de pago.
Por último, como ha sucedido con otras adquisiciones recientes de Google, no se espera que se retire el programa de la App Store para iOS ni de la tienda Google Play.