SlideShare una empresa de Scribd logo
1 de 17
MULTI-PLATAFORMA
MULTI-PLATAFORMA
+390,000 Desarrolladores
+50,000 Apps
appcelerator.com/customers/app-showcase
Titanium funciona como un puente entre el sistema operativo
nativo y el código de la aplicación
No es una solución basada en web que proporciona
funcionalidad a través de un Web View
JavascriptCore – iOS
Mozilla Rhino - Android
ACCESO A:
• APIs específicas de la plataforma
• Servicios basados ​​en localización
• Compartir en redes sociales
• Rich multimedia
• Manejo y almacenamiento de
datos en línea y en el dispositivo
• Extensibilidad
IDE basado en Eclipse
docs.appcelerator.com/titanium/3.0/#!/api/Titanium
TABGROUP
TAB
WINDOW
VIEWS
} Elemento que agrupa y contiene tabs o pestañas
Pestaña que contiene a su vez a una ventana
Parte principal de la interfaz. Toda app tiene al menos una ventana
Contenedores que almacenan elementos visuales y otras vistas
Titanium.UI
BUTTON
LABEL
TABLEVIEW
IMAGEVIEW
ACTIVITYINDICATOR
}
Botón al que se le puede agregar funciones y modificar el estilo
Elemento para mostrar bloques de texto plano
Funciona como una tabla de HTML con celdas
Elemento para mostrar imagenes, optimizado para móvil
Control que muestra un icono de cargando
CONTENEDORES
CONTROLES
docs.appcelerator.com/titanium/latest
docs.appcelerator.com/titanium/latest/#!/api/Alloy
= MVC
Todas las definiciones de ventanas, vistas y estilos, así
como variables, funciones y acceso a datos se programan
en archivos .js
TITANIUM
Los elementos visuales se agregan al proyecto por medio de XML en la carpeta
VIEWS y los estilos van en archivos .tss en la carpeta STYLES.
Todas las funciones y variables se definen en la carpeta CONTROLLERS.
ALLOY
TITANIUM ALLOY
CREAR PROYECTO ALLOY:
EN TITANIUM STUDIO
File > New > Titanium Project > Alloy
EN TERMINAL
Crear un nuevo proyecto de Titanium >
Abrir terminal
$alloy new
INSTALAR ALLOY: $sudo npm install alloy -g
CREAR CONTROLADORES:
EN TITANIUM STUDIO
Clic derecho en el proyecto > New> Alloy Controller
EN TERMINAL
$alloy generate controller row
Se crearán los siguientes archivos:
• controllers/row.js
• views/row.js
• styles/row.tss
CREAR MODELOS:
EN TITANIUM STUDIO
Clic derecho en el proyecto > New > Allow Model
EN TERMINAL
$alloy generate model todo
name:string active:boleean
Se crearán los siguientes archivos:
• models/todo.js
• models/todo.json
• migrations/320984132083_todo.js
PLATFORM SPECIFIC UI:
La propiedad platform permite mostrar elementos visuales solo en la
plataforma especificada:
• android
• ios
• mobileweb
<REQUIRE>
Permite partir la aplicación en componentes más pequeños
ESTILOS Y FUNCIONES GLOBALES
• Estilos globales
[project root]/app/styles/app.tss
• Funciones y variables globales
[project root]/app/alloy.js
TODO LO DEMÁS AQUÍ:
https://github.com/appcelerator/KitchenSink

Más contenido relacionado

Similar a Introducción a Titanium Appcelerator (2014)

EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptxEFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptxLuis Fernando Aguas Bucheli
 
Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700Luis Fernando Aguas Bucheli
 
Framework .NET 3.5 15 Configuración y despliegue de soluciones
Framework .NET 3.5 15 Configuración y despliegue de solucionesFramework .NET 3.5 15 Configuración y despliegue de soluciones
Framework .NET 3.5 15 Configuración y despliegue de solucionesAntonio Palomares Sender
 
HTML5 por Gustavo Vilchez
HTML5 por Gustavo VilchezHTML5 por Gustavo Vilchez
HTML5 por Gustavo VilchezGustavo
 
Evolution INTech - Acceso a bases de datos con Minimal APIs de .NET 6.pptx
Evolution INTech - Acceso a bases de datos con Minimal APIs de .NET 6.pptxEvolution INTech - Acceso a bases de datos con Minimal APIs de .NET 6.pptx
Evolution INTech - Acceso a bases de datos con Minimal APIs de .NET 6.pptxLuis775803
 
Curso de desarrollo de aplicaciones Android - Sesión 1
Curso de desarrollo de aplicaciones Android - Sesión 1Curso de desarrollo de aplicaciones Android - Sesión 1
Curso de desarrollo de aplicaciones Android - Sesión 1Daniel Alvarez
 
Framework .NET 3.5 02 Entorno de desarrollo (ide)
Framework .NET 3.5 02 Entorno de desarrollo (ide)Framework .NET 3.5 02 Entorno de desarrollo (ide)
Framework .NET 3.5 02 Entorno de desarrollo (ide)Antonio Palomares Sender
 
Introduccion a sharepoint framework
Introduccion a sharepoint frameworkIntroduccion a sharepoint framework
Introduccion a sharepoint frameworkLuis Valencia
 
Visual basic 404
Visual basic 404Visual basic 404
Visual basic 404291096
 
Microsoft Asp. Net [Asp.Net - Parte 2]
Microsoft Asp. Net [Asp.Net - Parte 2]Microsoft Asp. Net [Asp.Net - Parte 2]
Microsoft Asp. Net [Asp.Net - Parte 2]Antonio Torres
 
Fritzing-PrimerosPasos.pdf
Fritzing-PrimerosPasos.pdfFritzing-PrimerosPasos.pdf
Fritzing-PrimerosPasos.pdfjorgearevalos6
 

Similar a Introducción a Titanium Appcelerator (2014) (20)

Alloy Preview
Alloy PreviewAlloy Preview
Alloy Preview
 
Angular Fundamentals
Angular FundamentalsAngular Fundamentals
Angular Fundamentals
 
HTML5
HTML5HTML5
HTML5
 
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptxEFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
 
Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700
 
Html5
Html5Html5
Html5
 
Framework .NET 3.5 15 Configuración y despliegue de soluciones
Framework .NET 3.5 15 Configuración y despliegue de solucionesFramework .NET 3.5 15 Configuración y despliegue de soluciones
Framework .NET 3.5 15 Configuración y despliegue de soluciones
 
HTML5 por Gustavo Vilchez
HTML5 por Gustavo VilchezHTML5 por Gustavo Vilchez
HTML5 por Gustavo Vilchez
 
Evolution INTech - Acceso a bases de datos con Minimal APIs de .NET 6.pptx
Evolution INTech - Acceso a bases de datos con Minimal APIs de .NET 6.pptxEvolution INTech - Acceso a bases de datos con Minimal APIs de .NET 6.pptx
Evolution INTech - Acceso a bases de datos con Minimal APIs de .NET 6.pptx
 
Herramientas Java
Herramientas JavaHerramientas Java
Herramientas Java
 
Curso de desarrollo de aplicaciones Android - Sesión 1
Curso de desarrollo de aplicaciones Android - Sesión 1Curso de desarrollo de aplicaciones Android - Sesión 1
Curso de desarrollo de aplicaciones Android - Sesión 1
 
Clase_01.pdf
Clase_01.pdfClase_01.pdf
Clase_01.pdf
 
Framework .NET 3.5 02 Entorno de desarrollo (ide)
Framework .NET 3.5 02 Entorno de desarrollo (ide)Framework .NET 3.5 02 Entorno de desarrollo (ide)
Framework .NET 3.5 02 Entorno de desarrollo (ide)
 
Introduccion a sharepoint framework
Introduccion a sharepoint frameworkIntroduccion a sharepoint framework
Introduccion a sharepoint framework
 
Visual basic 404
Visual basic 404Visual basic 404
Visual basic 404
 
Microsoft Asp. Net [Asp.Net - Parte 2]
Microsoft Asp. Net [Asp.Net - Parte 2]Microsoft Asp. Net [Asp.Net - Parte 2]
Microsoft Asp. Net [Asp.Net - Parte 2]
 
2018.sps madrid.spfx workshop
2018.sps madrid.spfx workshop2018.sps madrid.spfx workshop
2018.sps madrid.spfx workshop
 
Fritzing primeros pasos
Fritzing primeros pasosFritzing primeros pasos
Fritzing primeros pasos
 
Fritzing-PrimerosPasos.pdf
Fritzing-PrimerosPasos.pdfFritzing-PrimerosPasos.pdf
Fritzing-PrimerosPasos.pdf
 
Fritzing primeros pasos
Fritzing primeros pasosFritzing primeros pasos
Fritzing primeros pasos
 

Introducción a Titanium Appcelerator (2014)

  • 3. Titanium funciona como un puente entre el sistema operativo nativo y el código de la aplicación No es una solución basada en web que proporciona funcionalidad a través de un Web View JavascriptCore – iOS Mozilla Rhino - Android
  • 4. ACCESO A: • APIs específicas de la plataforma • Servicios basados ​​en localización • Compartir en redes sociales • Rich multimedia • Manejo y almacenamiento de datos en línea y en el dispositivo • Extensibilidad
  • 5. IDE basado en Eclipse
  • 6. docs.appcelerator.com/titanium/3.0/#!/api/Titanium TABGROUP TAB WINDOW VIEWS } Elemento que agrupa y contiene tabs o pestañas Pestaña que contiene a su vez a una ventana Parte principal de la interfaz. Toda app tiene al menos una ventana Contenedores que almacenan elementos visuales y otras vistas Titanium.UI BUTTON LABEL TABLEVIEW IMAGEVIEW ACTIVITYINDICATOR } Botón al que se le puede agregar funciones y modificar el estilo Elemento para mostrar bloques de texto plano Funciona como una tabla de HTML con celdas Elemento para mostrar imagenes, optimizado para móvil Control que muestra un icono de cargando CONTENEDORES CONTROLES
  • 9. Todas las definiciones de ventanas, vistas y estilos, así como variables, funciones y acceso a datos se programan en archivos .js TITANIUM Los elementos visuales se agregan al proyecto por medio de XML en la carpeta VIEWS y los estilos van en archivos .tss en la carpeta STYLES. Todas las funciones y variables se definen en la carpeta CONTROLLERS. ALLOY
  • 11. CREAR PROYECTO ALLOY: EN TITANIUM STUDIO File > New > Titanium Project > Alloy EN TERMINAL Crear un nuevo proyecto de Titanium > Abrir terminal $alloy new INSTALAR ALLOY: $sudo npm install alloy -g
  • 12. CREAR CONTROLADORES: EN TITANIUM STUDIO Clic derecho en el proyecto > New> Alloy Controller EN TERMINAL $alloy generate controller row Se crearán los siguientes archivos: • controllers/row.js • views/row.js • styles/row.tss
  • 13. CREAR MODELOS: EN TITANIUM STUDIO Clic derecho en el proyecto > New > Allow Model EN TERMINAL $alloy generate model todo name:string active:boleean Se crearán los siguientes archivos: • models/todo.js • models/todo.json • migrations/320984132083_todo.js
  • 14. PLATFORM SPECIFIC UI: La propiedad platform permite mostrar elementos visuales solo en la plataforma especificada: • android • ios • mobileweb
  • 15. <REQUIRE> Permite partir la aplicación en componentes más pequeños
  • 16. ESTILOS Y FUNCIONES GLOBALES • Estilos globales [project root]/app/styles/app.tss • Funciones y variables globales [project root]/app/alloy.js
  • 17. TODO LO DEMÁS AQUÍ: https://github.com/appcelerator/KitchenSink

Notas del editor

  1. VENTAJAS Soporta el desarrollo de aplicaciones móviles multiplataforma Con una sola base de código, pueden producir aplicaciones móviles Web, Android y iOS Se desarrolla utilizando un lenguaje basado en JavaScript en un entorno de desarrollo integrado basado en Eclipse (Aptana Studio)
  2. VENTAJAS Aumenta en más de un 70 % la productividad al escribir aplicaciones Permite utilizar la experiencia de los desarrolladores en tecnologías y estándares Web Está muy bien documentado Tiene una gran comunidad de desarrolladores que intercambian ideas, consejos y ejemplos
  3. ¿QUE ES? Si lo vemos en un esquema de capas: La primera capa sería la del sistema Operativo: Windiws Mac y Linux para apps de escritorio y Android / iPhone para apps móviles. La segunda capa sería el puente que funciona como una traducción de Javascript a Ruby o Perl para apps de escritorio y Javascript a Java para Android y Objective C para iPhone. En la tercera capa encontramos el API del User Interface, el Desktop API y los modulos opcionales para apps de escritorio y de igual manera el API de UI, Phone API y Modulos opcionales para móvil En la cuarta capa es donde se encuentra el código de nuestro app que obtiene acceso a las características del dispositivo.
  4. APIs específicas de la plataforma Servicios basados ​​en localización Compartir en redes sociales Rich multimedia Manejo y almacenamiento de datos en línea y en el dispositivo Extensibilidad