Phonegap en Windows. Configuración del entorno y errores comunes.

El otro día me pidió ayuda un amigo el cual trataba de dar sus primeros pasos con el desarrollo de webapps para dispositivos móviles utilizando el Framework Phonegap. Se llevo algún que otro quebradero de cabeza en su configuración (y una pequeña reprimenda por mi parte para que migrará a Linux Mint :P).

A continuación detallo las pautas a seguir para su configuración en Windows:

Pasos estándar para preparar nuestro entorno de trabajo (en Windows):

  1. Descargar e instalar Java Development Kit (JDK)
  2. Descargar Ant y descomprimirlo en el disco duro.
  3. Descargar el SDK de Android (nota: recomiendo solo el SDK)
  4. Instalar Node.js (versión >=0.10.22) para utilizar su gestor de dependencias npm e instalar Phonegap.
  5. Tras esto, en la consola de Windows escribir:
  6. Configurar las variables de entorno:
    • JAVA_HOME ({path instalación JDK})
    • ANT_HOME ({path instalación ant}
    • ANDROID_HOME ({path instalación android/sdk})
  7. Añadir esta configuración en la variable PATH:

Errores, problemas y soluciones comunes en Windows.

  • Alguna de las variables de entorno no funciona. No encuentra las aplicaciones a través de la consola de Windows.
    Alternativamente al punto 6 se puede escribir el path absoluto en la variable PATH a cada una de los 4 directorios anteriores (a veces %VARIABLE% no es comprendido bien por Windows).
  • Ant usa JRE en vez de JDK incluso con variables de entorno
    Al ejecutar ant aparece un mensaje de error:

    Cuando aparece este error, es síntoma de que el sistema está utilizando JRE en vez de JDK (tienes los dos instalados sin saberlo). En este caso el paso 6 es obligatorio, y es necesario forzar la variable de entorno JAVA_HOME para que utilizar el JDK y muy importante: el path no debe incluir el directorio /bin/
  • Versión correcta del SDK de Android no encontrada
    Un error muy común al ejecutar una aplicación a través del comando: phonegap run android, es que aparezca en la ejecución el siguiente mensaje:

    Este error es debido a que tú versión de Phonegap instalada utiliza una versión del SDK de Android diferente a la que tienes. Revisa la versión del API de Android que necesitas y descargala a través del SDK Manager.

Espero que con estas indicaciones no tengáis ningún problema, en caso contrario nos vemos en los comentarios.

Saludos!

Debug de código mediante emulación de dispositivos y Media Types en Google Chrome

Últimamente, en mi trabajo, el desarollo frontend se ha incrementado considerablemente, y me he encontrado en la situación de tener que realizar varios contenidos web con formato muy especifico para su visualización en versión web, como en versión impresa, como ya os imaginaréis es contenido con resultados estadísticos, e informes, por lo que la versión impresa de la web cobra un papel muy importante.

Hasta hace relativamente poco tiempo, este trabajo era bastante pesado, puesto que no había apenas herramientas de depuración de código CSS para los diferentes Media Types (y además, teniendo en cuenta de que la gran mayoría fueron implementandos en CSS2…).

Desde el primero momento, supuse que Google Chrome, con sus Developer Tools, tendría que tener algún “as” bajo la manga, para facilitarnos la tarea, pero me resulto curioso que no encontré dicha opción en las herramientas. Tras ponerme a indigar por Google descubrí no sólo tenía una herramienta que facilitaba la tarea, era un completo emulador de todos los Media Types y por supuesto incluyendo su completo set de herramientas como inspector de elementos HTML, modificación de estilos CSS en vivo, etc…

El problema de esto, es que los desarrolladores de Chromium (versión base de Google Chrome) han movido (escondido) en repetidas ocasiones esta funcionalidad, y han conseguido despistar a más de uno.

En este momento (Versión 37.0.2062.120 m) se encuentran en:Debug de código y emulación de dispositivos en Chrome

  1. Chrome Developer Tools
    • Linux/Windows: ctrl + shift + j o F12
    • Mac: cmd + alt + j o F12
  2. Si no se abre automáticamente el Drawer, apretamos ESC.
  3. En el Drawer de la consola, veremos una pestaña que pone “Emulation”, aquí es donde actualmente han centralizado la Emulación del navegador:
    1. Devices: Para emular dispositivos en función del modelo, resolución etc…
    2. Media: Para emular Media Types.

Esta funcionalidad nos puede ahorrar un tiempo increíble a la hora de depurar código en desarrollo web, añadiendo toda la potencia que tiene el inspector de las Google Chrome Developer Tools, y su previsualizador en tiempo real.

Texto vertical con CSS (cross-browser)

El otro día haciendo unos ajustes en un proyecto, sé me presentó la necesidad de tener que mostrar un texto orientado de forma vertical. Como soy un poco reacio a utilizar imágenes para estas cosas, prefiero buscar soluciones CSS que en la mayoría de casos de este tipo suelen existir.

Si queremos mostrar un texto vertical con css, basta con añadir al elemento html (p,  div..) una clase con los siguientes estilos:

Los grados por supuesto, podemos ajustarlo a nuestras necesidades.

Si quieres ampliar información visita stackoverflow.

EasyGui: Realiza una sencilla interfaz gráfica en Python.

Como su propio nombre indica EasyGui es un módulo muy simple, para la programación de una interfaz gráfica  en Python.
No requiere ningún tipo de conocimiento añadido, todas las interacciones de la interfaz son realizadas mediante llamadas a funciones simples.

A continuación dejo una breve chuleta con algunas de las cosas que podemos hacer:

ynbox(msg=’Shall I continue?’, title=’ ‘, choices=(‘Yes’, ‘No’), image=None)

# Display a msgbox with choices of Yes and No.
ccbox(msg=’Shall I continue?’, title=’ ‘, choices=(‘Continue’, ‘Cancel’), image=None)
# Display a msgbox with choices of Continue and Cancel.
boolbox(msg=’Shall I continue?’, title=’ ‘, choices=(‘Yes’, ‘No’), image=None)
# Display a boolean msgbox. 
indexbox(msg=’Shall I continue?’, title=’ ‘, choices=(‘Yes’, ‘No’), image=None)
# Display a buttonbox with the specified choices.
msgbox(msg='(Your message goes here)’, title=’ ‘, ok_button=’OK’, image=None, root=None) 
# Display a messagebox.
buttonbox(msg=”, title=’ ‘, choices=(‘Button1’, ‘Button2’, ‘Button3’), image=None, root=None) 
# Display a msg, a title, and a set of buttons.
integerbox(msg=”, title=’ ‘, default=”, lowerbound=0, upperbound=99, image=None, root=None,**invalidKeywordArguments) 
# Show a box in which a user can enter an integer. 
multenterbox(msg=’Fill in values for the fields.’, title=’ ‘, fields=(), values=()) 
# Show screen with multiple data entry fields. 
multpasswordbox(msg=’Fill in values for the fields.’, title=’ ‘, fields=(), values=())
# Same interface as multenterbox.
enterbox(msg=’Enter something.’, title=’ ‘, default=”, strip=True, image=None, root=None)
# Show a box in which a user can enter some text.
passwordbox(msg=’Enter your password.’, title=’ ‘, default=”, image=None, root=None) 
# Show a box in which a user can enter a password.
multchoicebox(msg=’Pick as many items as you like.’, title=’ ‘, choices=(), **kwargs)
# Present the user with a list of choices.
choicebox(msg=’Pick something.’, title=’ ‘, choices=())
# Present the user with a list of choices.
abouteasygui()

# Shows the easygui revision history

Para usar EasyGui, simplemente basta con copiar el archivo easygui.py en la carpeta donde tenemos nuestro programa de Python.

Descargar easygui.py (v. 0.96):
http://easygui.sourceforge.net/download/version_0.96/index.html#downloadFiles

Trabajar con reStructuredText: Docutils y rst2pdf

Hace unos años, era habitual al realizar trabajos, escribir cartas, o documentos, utilizar MS Office un procesador de textos. En la actualidad, nos encontramos que la información se presenta en la mayoria de los casos en formato PDF, o incluso directamente documentos web en HTML.

Desde hace poco, vengo utilizando una herramienta que de forma sencilla, puedes obtener un documento en PDF/HTML de un simple documento de texto (.txt) siguiendo unas simples pautas con la información.
Este modo de estructurar la información se llama reStructuredText.

¿Qué es?

reStructuredText es un lenguaje de marcas ligero, de fácil lectura en su formato de fuente pero muy versátil para producir documentos complejos.

¿Qué puedo hacer?

  • Escribo la documentación en texto plano y después la convierto a distintos formatos.
  • Soporta versionado porque es texto.
  • Se puede leer con cualquier editor.
Los documentos se puede convertir a muchos formatos diferentes, a destacar: PDF y HTML
Además, permite utilizar hojas de estilos predeterminadas para incluir en la conversión, lo cual hace que puedas crear un documento PDF o HTML “curioso” con unos sencillos pasos.

A continuación detallo las instrucciones para instalar esta aplicación en Windows:

  • Instalo Python (http://www.python.org/download)
  • Instalo setuptools
    • Descargar y ejecutar el archivo peak.telecommunity.com/dist/ez_setup.py desde el intérprete de comandos (cmd)

C:Python27python.exe ez_setup.py

C:Python27python.exe setup.py install

Para Linux, es bastante sencillo, simplemente hace falta instalar Python, y posteriormente docutils y rst2pdf.

Ejemplos de utilización desde intérprete de comandos (cmd):

C:Python27Scriptsrst2html origen.rst destino.html

C:Python27Scriptsrst2pdf origen.rst -o destino.pdf