cocinando ricas apps con javascript
DESCRIPTION
Conferencia dictada en UVM, UACM, y el Tecnológico de Milpa AltaTRANSCRIPT
![Page 2: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/2.jpg)
Menú del DíaMenú del Día
● 1.- ¿De qué va esto?1.- ¿De qué va esto?
● 2.- Javascript2.- Javascript
● 3.- Características3.- Características
● 4.- Demos4.- Demos
![Page 3: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/3.jpg)
¿De qué va esto?¿De qué va esto?
● ¿Para que aprender Javascript?¿Para que aprender Javascript?
● MóvilMóvil
● WebWeb
● ServidorServidor
● Lenguaje SCRIPT.Lenguaje SCRIPT.
![Page 4: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/4.jpg)
¿Quién soy yo?¿Quién soy yo?
● Alberto Luebbert M.Alberto Luebbert M.
CEO en ideas HappyCEO en ideas Happy
www.ideashappy.comwww.ideashappy.com
Usuario GNU Linux desde el 2002Usuario GNU Linux desde el 2002
Usuario Debian desde el 2003Usuario Debian desde el 2003
Entusiasta promotor desde el 2004Entusiasta promotor desde el 2004
openSUSE Ambassador desde el 2010openSUSE Ambassador desde el 2010
Atlantista de toda la vida ñ_ñAtlantista de toda la vida ñ_ñ
Ing. En Sistemas Computacionales TESOEMIng. En Sistemas Computacionales TESOEM
Miembro fundador de Comunidades:Miembro fundador de Comunidades:
Generando Maldad, SUSEMXGenerando Maldad, SUSEMX
Coordinador FLISOL EDOMEX 2006-2010Coordinador FLISOL EDOMEX 2006-2010
Project Leader Hi ldebrandoProject Leader Hi ldebrando
![Page 5: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/5.jpg)
En el principio...En el principio...
var form = document.forms[0];var form = document.forms[0];
if(form.txtNombre.length == 0){if(form.txtNombre.length == 0){
alert(“Falta el nombre”);alert(“Falta el nombre”);
return false;return false;
}}
}}
![Page 6: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/6.jpg)
Hoy en dia...Hoy en dia...
![Page 7: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/7.jpg)
Hoy en dia...Hoy en dia...
![Page 8: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/8.jpg)
¿Donde empleare Javascript?¿Donde empleare Javascript?
Móvil - Titanium AppceleratorWeb – (jQuery)Servidor - NodeJS
![Page 9: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/9.jpg)
MóvilesMóviles
var win = Titanium.UI.createWindow({backgroundColor: '#003366',title: 'Hola mundo en javascript'
});
var btn = Titanium.UI.createButton({Title: 'Presioname',Width: 200,Height: 50,
});win.add(btn)
win.open();
![Page 10: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/10.jpg)
MóvilesMóviles
var win = Titanium.UI.createWindow({backgroundColor: '#003366',title: 'Hola mundo en javascript'
});
var btn = Titanium.UI.createButton({Title: 'Presioname',Width: 200,Height: 50,
});win.add(btn)
win.open();
![Page 11: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/11.jpg)
Móviles - CommonJSMóviles - CommonJS
● Hoja.jsHoja.js
exports.ventana = {exports.ventana = {
self: {self: {
BackgroundColor: '#003366',BackgroundColor: '#003366',
Title: 'Hola Mundo'Title: 'Hola Mundo'
}}}}
exports.boton = {exports.boton = {
self: {self: {
width: 200,width: 200,
height: 50,height: 50,
title: 'presioname'title: 'presioname'
}}}}
● Win.jsWin.js
function home(){function home(){
var est = require('ui/handheld/Hoja');var est = require('ui/handheld/Hoja');
var self = Ti.UI.createWindow(var self = Ti.UI.createWindow(
est.ventana.self);est.ventana.self);
var btn = Ti.UI.createButton(var btn = Ti.UI.createButton(
est.boton.self);est.boton.self);
return self;return self;
}}
module.exports = Home;module.exports = Home;
![Page 12: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/12.jpg)
Conexión a BD con JavascriptConexión a BD con Javascript
var DB_NAME = '4dm.db';
exports.createBase = function() {
var db = Ti.Database.open(DB_NAME);
var err;
try{
db.execute('CREATE TABLE IF NOT EXISTS noticias(id INTEGER PRIMARY KEY, titulonoticia TEXT, fechanoticia TEXT, noticiacompleta TEXT, url TEXT)');
}
catch(err){
alert(“Algun error”);
}
db.close();
};
var db = require('/ui/BD');var db = require('/ui/BD');
db.crearBase();db.crearBase();
![Page 13: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/13.jpg)
Conexión a BD con JavascriptConexión a BD con Javascript
var DB_NAME = '4dm.db';
exports.createBase = function() {
var db = Ti.Database.open(DB_NAME);
var err;
try{
db.execute('CREATE TABLE IF NOT EXISTS noticias(id INTEGER PRIMARY KEY, titulonoticia TEXT, fechanoticia TEXT, noticiacompleta TEXT, url TEXT)');
}
catch(err){
alert(“Algun error”);
}
db.close();
};
var db = require('/ui/BD');var db = require('/ui/BD');
db.crearBase();db.crearBase();
![Page 14: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/14.jpg)
Algunas apps hechas con AppceleratorAlgunas apps hechas con Appcelerator
![Page 15: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/15.jpg)
Geolocalización con jQueryGeolocalización con jQuery
![Page 16: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/16.jpg)
Geolocalización con jQueryGeolocalización con jQuery
function obtenerPosicion(location){
var posicion = new google.maps.LatLng(location.coords.latitude, location.coords.longitude)
var mapa = new google.maps.Map(mapDiv, {
zoom: 16,
center: position,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var marka = new google.maps.Marker({
position: position,
map: map
});
new google.maps.Geocoder().geocode({
location: posicion},
obtenerPosicion);
![Page 17: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/17.jpg)
Hola mundo en Node.jsHola mundo en Node.js
var http = require('http');http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('¡Hola Mundo!\n');}).listen(8081); console.log('Servidor ejecutándose en http://127.0.0.1:8081/');
![Page 18: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/18.jpg)
Generar JSON en Node.JSGenerar JSON en Node.JS
var contacto = {var contacto = {
id: 1,id: 1,
lastName: "Pérez",lastName: "Pérez",
firstName: "Martin"firstName: "Martin"
};};
var texto =var texto =
JSON.stringify(contacto);JSON.stringify(contacto);
Contacto{Contacto{
"id":1,"id":1,
"lastName":"P%eu%rez","lastName":"P%eu%rez",
"firstName":"Martin""firstName":"Martin"
}}
![Page 19: Cocinando Ricas Apps con Javascript](https://reader034.vdocuments.pub/reader034/viewer/2022052301/5599347c1a28ab677a8b45c5/html5/thumbnails/19.jpg)
Mucha más informaciónMucha más información
● Generando MaldadGenerando Maldad
www.generandomaldad.comwww.generandomaldad.com
www.facebook.com/generandomaldadwww.facebook.com/generandomaldad
twitter: @generandomaldadtwitter: @generandomaldad
● Ejemplo de jQueryEjemplo de jQuery
https://github.com/hdragomir/Odeon-Labs--https://github.com/hdragomir/Odeon-Labs--Geolocation-with-Google-MapsGeolocation-with-Google-Maps